@charset 'UTF-8';
@import url('../../../system/lib/mdi/css/materialdesignicons.min.css');

/**
 * @license
 * MyFonts Webfont Build ID 3778245, 2019-06-25T14:19:17-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: BrandonGrotesqueWeb-Regular by HVD Fonts
 * URL: https://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/regular/
 * Copyright: Copyright (c) 2015 by Hannes von Doehren. All rights reserved.
 * Licensed pageviews: 140,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3778245
 * 
 * © 2019 MyFonts Inc
*/
@import url("//hello.myfonts.net/count/39a6c5");
@font-face {font-family: 'BrandonGrotesqueWeb'; src: url('../webfonts/39A6C5_0_0.eot');src: url('../webfonts/39A6C5_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/39A6C5_0_0.woff2') format('woff2'),url('../webfonts/39A6C5_0_0.woff') format('woff'),url('../webfonts/39A6C5_0_0.ttf') format('truetype');}

/**
 * © 2019 Higi Bigler (nullnulleins.ch). All rights reserved.
 */
* { margin: 0; padding: 0; }
html, body { height: 100%; }
/*          italic small-caps bold */
body { font: normal normal normal 1.125em/1.222222222222222 'BrandonGrotesqueWeb', sans-serif; margin: 0; padding: 0; -webkit-text-size-adjust: none; overflow-y: scroll; background-color: #FFF; color: #000; }

/* structure */
.fixedwidthwrapper { max-width: calc(54% + 658px); margin: 0 0 0 auto; padding: 0 8% 0 8%; box-sizing: border-box; }
section .fixedwidthwrapper { background-color: #f7ece7; }
.fixedwidth { max-width: 1104px; box-sizing: border-box; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

header { padding: 0 0 0 4%; position: fixed; left: 0; right: 0; top: 0; background-color: #FFF; z-index: 2; }

#logo { max-width: 420px; min-width: 220px; width: 34%; margin: 0; z-index: 3; position: absolute; top: 0; }
#logo > div { height: 0; padding-bottom: 140.952380952381%; position: relative; background-image: url(../img/yogabird.jpg); background-size: cover; background-repeat: no-repeat; background-color: #D7B383; }
#logo > div > div { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; top: 0; bottom: 0; left: 0; right: 0; }
#logo a { position: absolute; bottom: 0; left: 0; right: 0; }
#logo a img { margin: 1.75em 1.75em 1.75em auto; width: 67.61904761904762%; height: auto; }
#logo svg .cls-2 { fill: #FFF !important; }

#logospacer { width: 42.15%; max-width: 420px; margin-bottom: 2em; min-width: 220px; }
#logospacer div { height: 0; padding-bottom: 140.952380952381%; display: block; /*background-color: rgba(255,0,0,.25);*/ }

#navigation { width: 50%; margin: 0 0 0 auto; }
#navigation > ul { display: -ms-flexbox; display: flex; width: 100%; height: 6.35em; }
#navigation > ul > li { -ms-flex-positive: 2; flex-grow: 2; text-align: center; }
#navigation > ul > li > a { margin: 1em 0 1.1em; display: inline-block; }
#navigation > ul > li:first-child { text-align: left; -ms-flex-positive: 1; flex-grow: 1; }
#navigation > ul > li:last-child { text-align: right; -ms-flex-positive: 1; flex-grow: 1; }
#navigation > ul ul { position: absolute; padding: 1.125em 0 0; padding: 0 0 0 .75em; margin: -1em 0; }

#metanavigation { position: fixed; right: 1%; top: 10.5em; font-size: 110%; z-index: 6; }
#metanavigation ul li { padding: .175em .5em; }

#metanavigation .externalurl[href*=facebook] span,
#metanavigation .externalurl[href*=instagram] span { display: none; }
#metanavigation .externalurl[href*=facebook]:before,
#metanavigation .externalurl[href*=instagram]:before { font-family: 'Material Design Icons'; }
#metanavigation .externalurl[href*=facebook]:before { content: '\F20C'; }
#metanavigation .externalurl[href*=instagram]:before { content: '\F2FE'; }

nav ul { list-style: none; }
nav a, #smartnavigation a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; color: inherit; }
#metanavigation a:hover, #smartnavigation a:hover { text-decoration: none; color: #9d96b6; }

section { position: relative; padding: 0 0 0 4%; }
main > section:last-child article { padding-bottom: 0; }

/* basic */
section article { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; padding-bottom: 2.5em; }
section article > div { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 50%; }
section article > div.text { margin-top: 1em; }

/* home */
section.home article { width: 50%; margin: 3.85em 0 0 auto; padding-top: 8em; padding-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 0; }
section.home article > div { width: 100%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; position: relative; }

/* portrait */
section.portrait article > div.text { margin-top: 6em; }
section.portrait .portraitimage { background-repeat: no-repeat; background-size: cover; margin: 0 15.75% 4em 3.25em; max-width: 361.2px; position: relative; z-index: 2; }
section.portrait .colorbox { background-color: rgba(157,150,182,.75); mix-blend-mode: multiply; position: absolute; top: 20%; bottom: -20%; right: 90%; width: 50vw; }
section.portrait img { opacity: 1; width: 100%; height: auto; animation-duration: 6s; animation-name: flipflop; animation-iteration-count: infinite; }
section.portrait img:hover { animation-play-state: paused; }
@keyframes flipflop {
	  1% { opacity: 1; }
	 45% { opacity: 1; }
	 50% { opacity: 0; }
	 95% { opacity: 0; }
	100% { opacity: 1; }
}


/* contact */
main > section.contact .fixedwidthwrapper { background-color: #FFF; }
main > section.contact article { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; min-height: 0; }
main > section.contact article > div.text { margin-top: 1.55em; margin-bottom: 1.55em; }
main > section.contact p.bigger a { color: inherit; }
main > section.contact a:hover { text-decoration: underline; }

/* workshops */
ol.workshops { list-style: none; margin: 3.5em 0; }
ol.workshops h2 { margin: 0; }
ol.workshops p { margin: 0; }
ol.workshops li { width: 50%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; margin: 0 0 1.25em; box-sizing: border-box; padding-right: 4%; }
ol.workshops li > div { position: relative; }
ol.workshops.columns { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; }
ol.workshops.columns li:nth-child(even) { padding-left: 4%; }

.workshopimages { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 6.2em 0 2.2em; }
.workshopimages > div { width: 50%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; }
.workshopimages > div:first-child { padding-right: 1.25em; }
.workshopimages > div:last-child { padding-left: 1.25em; }
.workshopimages figure { height: 0; padding-bottom: 100%; width: 100%; }
.workshopimages img { width: 100%; height: auto; }

section.retreat { overflow: hidden; }
section.retreat .workshopimages > div:last-child figure { position: relative; }
section.retreat .workshopimages > div:last-child figure:after { content: ''; display: block; background-color: rgba(182,176,200,.65); mix-blend-mode: multiply; position: absolute; width: 50vw; height: calc(100% + 2.5em); bottom: 0; left: 0; }

h1, h2, h3, h4 { font-weight: 400; margin: 0; }

h1 { position: relative; font-size: 160%; margin: 1em 0; }
.colorbox span { margin: 0; }
h2 { text-decoration: underline; font-size: 100%; line-height: inherit; margin: 1em 0 0; }
h2.space { margin-bottom: 1em; }
h2 + p { margin-top: 0; }
p, main ul { margin: 1em 0; }
p.bigger { font-size: 122.2222222222222%; }
a { outline: none; color: inherit; text-decoration: none; color: #9d96b6; }
a:hover { color: #9d96b6; text-decoration: underline; }
a img { border: none; }
main p + ul, #ckeditorarea p + ul { margin-top: -1em; }
main ul, #ckeditorarea ul { list-style: none; }
main ul li, #ckeditorarea ul li { padding-left: 1em; }
main ul li:before, #ckeditorarea ul li:before { content: '–'; margin-left: -1em; width: 1em; display: inline-block; }

/* gvideoembed */
span.gvideoembed { display: block; background-size: cover; background-position: center; position: relative; max-width: 100% !important; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; transition: all .25s; cursor: pointer; background-color: #000; }
span.gvideoembed:hover { opacity: .9; }
span.gvideoembed a.gvideoembed { display: none; }
span.gvideoembed:before { opacity: .5; content: ''; display: block; border-radius: 5px; width: 44px; height: 44px; background-color: #FFF; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; padding: 0; transition: all .25s; }
span.gvideoembed:after { opacity: .9; content: ''; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -9px; width:0; height:0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 22px solid #000; transition: all .25s; }
span.gvideoembed:hover:before, span.gvideoembed:hover:after { opacity: .85; }
span.gvideoembed.loaded, span.gvideoembed.loaded:hover { opacity: 1; cursor: wait; }
span.gvideoembed.loaded:after, span.gvideoembed.loaded:before { display: none; }
.gvideoembed iframe, .gvideoembed object, .gvideoembed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }

/* image2 */
img { display: block; }
figure { margin: 0; padding: 0; }
figure.gimagecaptioned { margin-bottom: 2em; }
figure.gimagecaptioned figcaption { font-size: 90%; margin-top: .5em; max-width: 100%; }
.gimageleft { float: left; margin: .2em 1em 1em 0; }
.gimagecenter { text-align: center; }
.gimagecenter figcaption, .gimagecenter img { margin-left: auto; margin-right: auto; text-align: left; }
.gimageright { float: right; margin: .2em 0 1em 1em; }

/**/
.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }
span.nowrap { white-space: nowrap; }

/* mdi */
span.mdi { }
span.mdi.mdi-size-xs { font-size: 50%; }
span.mdi.mdi-size-s { font-size: 75%; }
span.mdi.mdi-size-l { font-size: 150%; }
span.mdi.mdi-size-xl { font-size: 200%; }
span.mdi > span { display: none; }

.twocolumns > div.twocolumns-right { margin-top: 2.5em; }

/* twocolumns or not */
@media only screen and (min-width: 1100px), only screen and (max-width: 800px) and (min-width: 520px) {
	.twocolumns { display: flex; width: 100%; flex-direction: row; }
	.twocolumns:not(:first-child) { margin-top: -1em; }
	.twocolumns:not(:last-child) { margin-bottom: -1em; }
	.twocolumns > div { flex-grow: 1; width: 50%; box-sizing: border-box; }
	.twocolumns > div.twocolumns-left { padding-right: 4%; }
	.twocolumns > div.twocolumns-right { padding-left: 4%; margin-top: 0em; }
}
#ckeditorarea .twocolumns { display: flex; width: 100%; flex-direction: row; }
#ckeditorarea .twocolumns:not(:first-child) { margin-top: -1em; }
#ckeditorarea .twocolumns:not(:last-child) { margin-bottom: -1em; }
#ckeditorarea .twocolumns > div { flex-grow: 1; width: 50%; }
#ckeditorarea .twocolumns > div.twocolumns-left { margin-right: 1.25em; }
#ckeditorarea .twocolumns > div.twocolumns-right { margin-left: 1.25em; margin-top: 0em; }

/* wordshops columns or not */
@media only screen and (max-width: 1100px) and (min-width: 800px), only screen and (max-width: 560px) {
	ol.workshops li { width: 100%; }
	ol.workshops.columns li:nth-child(even) { padding-left: 0; }
	ol.workshops.columns { display: block; }
}

/* rwd */
@media only screen and (min-width: 801px) {
	/* image */
	section.image { z-index: 1; }
	section.image article { position: relative; }
	section.image article > div.text { z-index: 1; position: relative; background-color: rgba(255,255,255,.62); padding: .75em .75em 0 .75em; box-sizing: border-box; margin: 5.5em 0 10.5em; }
	section div.pageimagewrapper { position: absolute; z-index: 0; /*left: 0;*/ top: 5.5em; bottom: 2.5em; right: 0; width: 120%; }
	section div.pageimagewrapper > div { position: absolute; left: 0; top: 0; bottom: 0; right: 0; }
	section div.pageimagewrapper div.pageimage { background-size: cover; background-position: 38% 50%; background-repeat: no-repeat; top: 0; width: 100%; position: absolute; bottom: 3.5em; }
	section.image .colorbox { width: calc(50% + 2.5em); background-color: rgba(204,180,119,.8); margin: 0; z-index: 0; position: absolute; mix-blend-mode: multiply; right: -2.5em; bottom: 0; height: 13em; }
	section.image .colorbox span { position: absolute; bottom: 2em; right: 2.5em; }
	#smartnavigation { display: none; }
}
@media only screen and (min-width: 1500px) {
	section div.pageimagewrapper { width: 88vw; max-width: 84em; }
}
@media only screen and (max-width: 1025px) {
	.fixedwidthwrapper { padding: 0 12% 0 4%; }
}
@media only screen and (max-width: 800px) {
	.fixedwidthwrapper { padding: 0 12% 0 4%; }
	header { height: 2em; background-color: #FFF; padding-bottom: 0; }
	section.portrait article > div.text { margin-top: 20%; }
	section.portrait .portraitimage { margin-bottom: 0; }
	main > section.contact article > div.text { margin-top: 0; }
	#navigation { display: none; }
	.fixedwidth { display: block; }
	section.home article { width: 100%; padding-top: 0; margin-top: 0; padding-bottom: 2.5em; }
	section article > div { width: 100%; }
	section article > div.text { margin-top: 0; }
	section article { flex-direction: column; }
	.workshopimages { margin-top: 0; }
	section div.pageimagewrapper { position: relative; }
	ol.workshops { margin: 0 0 2.5em; }
	.workshopimages > div:first-child { padding-right: 4%; }
	.workshopimages > div:last-child { padding-left: 4%; }
	#metanavigation { right: 0; }
	section.portrait .portraitimage { margin-right: 0; z-index: 0; }
	section.contact { padding-top: 2.5em; }

	section div.pageimagewrapper { position: absolute; z-index: 0; left: 0; top: 5.5em; bottom: auto; right: 0; padding-bottom: 60%; background-color: blue; }
	section.image article > div.text { margin-top: calc(70% + 5em); }
	section div.pageimagewrapper > div { position: absolute; left: 0; top: 0; bottom: 0; right: 0; }
	section div.pageimagewrapper div.pageimage { background-size: cover; background-position: 38% 50%; background-repeat: no-repeat; top: 0; width: 100%; position: absolute; bottom: 0; }
	section.image .colorbox { width: 47%; background-color: rgba(204,180,119,.8); margin: 0; z-index: 0; position: absolute; mix-blend-mode: multiply; right: 0; top: calc(5.5em + 11vw + 3em); height: 0; padding-bottom: 50%; }
	section.image .colorbox span { position: absolute; top: calc(100% - 2.35em); right: 25.53191489361702%; text-align: right; }
	
	#smartbutton { position: fixed; top: 0; right: 0; width: 2.75em; height: 2em; z-index: 6; }
	#smartbutton a { position: relative; display: block; width: 2.75em; height: 2em; }
	#smartbutton a:before, #smartbutton a:after { content: ''; width: 1.5em; height: 2px; background-color: #000; display: block; left: 2.25em; top: calc(.75em - 2px); position: absolute; margin: 0 0 0 -1.5em;
		transition: transform .3s, top .15s .15s, bottom .15s .15s; 
	}
	#smartbutton a:after { bottom: calc(.75em - 2px); top: auto; }
	body.smartnavigation #smartbutton a:before { transform: rotate(-45deg); top: calc(1em - 1px); }
	body.smartnavigation #smartbutton a:after { transform: rotate(45deg); bottom: calc(1em - 1px); }
	body.smartnavigation #smartbutton a:before, body.smartnavigation #smartbutton a:after { transition: top .15s, bottom .15s, transform .3s .15s; }

	#smartnavigation { position: fixed; top: 0; left: 0; bottom: 100%; right: 0; background-color: #FFF; z-index: 5; overflow: auto; justify-content: center; display: flex; opacity: 0; transition: opacity .3s, bottom .05s .3s; }
	body.smartnavigation #smartnavigation { bottom: 0; opacity: 1; transition: opacity .3s .05s, bottom .05s; }

	#smartnavigation div { padding: 2em 8%; flex-grow: 0; margin: auto; }
	#smartnavigation a { font-size: 160%; }
	#smartnavigation ul { list-style: none; }
	#smartnavigation li { margin: 1em; }
	#smartnavigation li li { margin: 0 0 0 1em; }
}
@media only screen and (max-width: 800px) and (orientation: landscape) {
	#metanavigation { top: 27vh; };
}

/* workshop images columns or rows */
@media only screen and (max-width: 520px), only screen and (max-width: 1000px) and (min-width: 801px) {
	.workshopimages { display: flex; flex-direction: column; }
	.workshopimages > div { width: 100%; padding: 0; }
	.workshopimages > div:first-child { padding-right: 0; padding-bottom: 4.25%; }
	.workshopimages > div:last-child { padding-left: 0; }
	section.retreat .workshopimages > div:last-child figure::after { width: 100vw; height: calc(100% + 2.5em); bottom: -2.5em; }
	section.retreat .fixedwidthwrapper { padding-bottom: 2.5em; }
}

@media only screen and (max-width: 520px) {
	#smartnavigation div { margin-left: 0; }
}