/* Reset */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {outline: none; border: none;}
ol, ul { list-style: none; margin: 0;}
li { margin: 0; padding: 0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

/* Layout */
body {
	font: 1.3em 'Hind Vadodara',Lucia, Helvetica;
	color: black;
}
h1   {
    font-size:1.7em;
    line-height: 1.35em;
    margin:0.8em 0 0.25em 0;
    letter-spacing: -0.02rem;
}
h2   {
    font-size:1.4em;
    line-height: 1.35em;
    margin:0.8em 0 0.25em 0;
    letter-spacing: -0.015rem;
}
h3   {
    margin:0.5em 0 0em 0;
    letter-spacing: -0.015rem;
}
p    {
	font-size:1.05em;
	line-height: 1.4em;
	margin:0.25em 0 0.25em 0;
	letter-spacing: -0.01rem;
}
p.big {
	font-size:1.3em;
	line-height: 1.55em;
	margin:0.66em 0 0.25em 0;
}

.firststageelement {
	margin-top: 0;
}

/*h1   {
    font-size:1.7em;
    line-height: 1.35em;
    margin:0.1em 0 0.4em 0;
    letter-spacing: -0.02rem;
}
h2   {
    font-size:1.4em;
    line-height: 1.35em;
    margin:0.1em 0 0.4em 0;
    letter-spacing: -0.015rem;
}
h3   {
    margin:0.1em 0 0.4em 0;
    letter-spacing: -0.015rem;
}
p    {
	font-size:1.05em;
	line-height: 1.4em;
	margin-bottom:0.33em;
	letter-spacing: -0.01rem;
}
p.big {
	font-size:1.3em;
	line-height: 1.6em;
	margin-bottom:0.25em;
}*/

.bigtext p {
	font-size:1.3em;
	line-height: 1.6em;
	margin-bottom:0.25em;
}

a {
    color: black;
    text-decoration:underline;
}

a:hover,
a:focus,
a:active {
	text-decoration: underline;
	text-decoration-color: #2CF2A3;
}

#stage-teaser a:hover,
#stage-teaser a:focus,
#stage-teaser a:active {
	text-decoration: underline;
	text-decoration-color: white;
}

#sticky-subnav a:link, #sticky-subnav a:visited	{ text-decoration: none; }
#sticky-subnav a:hover, #sticky-subnav a:focus, #sticky-subnav a:active	{ text-decoration: underline; }

mark {
	background-color:#F3CE2A;
}
mark.green {
	background-color:#2CF2A3;
}

/* navigation */
nav {
	position: relative;
	overflow-y:hidden;
	margin: 0 80px 4px 0;
}
nav ul {
	list-style: none;
	display:inline;
	padding: 0;
	margin: 0 auto;
}

nav ul li {
	display: inline;
	padding: 0 0.4em 0 0.4em;
}

nav ul#language li {
	display: inline;
	padding: 0 0.1em 0 0.1em;
}

nav ul li a {
	font-size:1.15em;
	font-weight: bold;
	color: black;
 	text-decoration:none;
}

/* Form fields */
input[type=text], input[type=email] {
 	width: 66%;
 	padding: 11px 10px;
 	margin: 8px 0;
 	font-size:1em;
 	color:#222;
  	box-sizing: border-box;
  	border:0;

 	-webkit-appearance: none;
	border-radius: 0; 
}

input[type=text]:focus {
 	border: 2px solid #2CF2A3;
}

input[type=button], input[type=submit], input[type=reset], .button-link {
 	background-color: #2CF2A3;
 	border: 2px solid white;
 	color: black;
 	font-size:1.1em;
 	padding: 8px 50px;
 	text-decoration: none;
 	margin: 4px 2px;
 	cursor: pointer;
 	text-align: center;

 	-webkit-appearance: none;
	border-radius: 0; 
}

/* Tables */
td {
	padding: 0.2em 2em 0 0;
	font-size:1.15em;
	line-height: 1.4em;
	margin-bottom:0.25em;
	letter-spacing: -0.01rem;
}


/* content */
section {
	margin-bottom: 2.66em;
}
section h3 {
	display:inline-flex;
	background-color:#2CF2A3;
}

ul {
	list-style: circle outside;
	padding-left: 1.2rem;
}

#navBtnOpen {
	display:none;
}

#navBtnClose {
	display:none;
}

#navSepearator {
	display:inline;
	margin:0 .5em 0 0.5em;
}

#sticky-subnav {
	position:sticky;
	top:0;
	float:left;
	z-index: 50;
	margin-bottom:1em;

	padding:0.4em 0 0.2em 0;
	background-color: white;
	border-bottom: 3px dotted #2CF2A3;

	box-shadow: 5px 3px 3px white;
}

#sticky-subnav ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
}

#sticky-subnav li {
	float:left;
}

#sticky-subnav a {
	display: block;
  	padding: 0 20px 0 0;
}


/* Structure */
#wrapper {
	margin:0.5em;
}

#top {
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
	height:60px;
	padding-top:0.4em;
}
#logo {
	height:55px;
	margin-left:80px;
}
#img-logo {
	width:160px;
	height:55px;
}

.dots {
	width:98%;
	background-color:white;
	background-image: radial-gradient(#F3CE2A 25%, transparent 25%),
	radial-gradient(#F3CE2A 25%, transparent 25%);
	background-size: 80px 80px;
	background-position: -40px -40px, 0px 0px;
}
.dots-home {
	position:absolute;
	top:88px;
	height:280px;
	z-index: 0;
}
.dots-sub {
	position:absolute;
	top:88px;
	height:160px;
	z-index: 0;
}
.dots-green {
	background-image: radial-gradient(#2CF2A3 25%, transparent 25%),
	radial-gradient(#2CF2A3 25%, transparent 25%);
}
.dots-footer {
	width:100%;
	position: relative;
	top:-12.66em;
	height:200px;
	z-index:0;
}
.dots-who {
	width:100%;
	position:relative;
	top:-26.33rem;
	height:200px;
	z-index: 0;
}

#stage {
	width:90%;
	margin:88px 0 1.66em 80px;
	position: relative;
	z-index:10;
	display: flex;
	justify-content: flex-start;
}

#stage-content {
	width:66%;
	padding:0.66em 3.66em 1.66em 0.66em;
	background-color:#F3CE2A;
}

#stage-teaser {
	width: 270px;
    height: 270px;
	background-color:#2CF2A3;

	border-radius: 50%;
	transform: rotate(10deg);
    display: flex;
    justify-content: center;
    flex-direction: column;

    text-align: center;
    padding: 0 0.33em 0 0.33em;

  	margin-top:-25px;
	margin-left:-3em;
}

#stage-teaser.small {
	width: 250px;
    height: 250px;
    top:0px;
    right:-25%;
    padding:0.33em;
}


.wide {
	width:95%;
}

.indent {
	width:95%;
	margin-left:80px;
}

.medium {
	width:85%;
	margin-left:80px;
}

.slim {
	width:69%;
	margin-left:80px;
}

.cols {
	display:flex;
	align-items: flex-start;
	justify-content: space-between;
}

.cols-around {
	display:flex;
	align-items: flex-start;
	justify-content: space-around;
}

.spread {
	justify-content: space-around;
}

.stretch {
	align-items: stretch;
}

.wrap {
	flex-wrap: wrap;
}

.full {
	height:70vh;
}

.intro {
	margin-bottom: 1em;
}

.cols > img {
	margin-right:2em;
}

.full > img {
	position: relative;
	z-index: 0;
}

.offer-item {
	width:calc(220px + 14.66vw);
	height:calc(220px + 14.66vw);
	max-width: 500px;
	max-height: 500px;
	margin-bottom:2em;

	background-repeat:no-repeat;
	background-position:top left;
	background-size:contain;
}

.offer-title {
	padding-top:1em;
	margin-left:-3em;
}
.offer-text {
	width:60%;
	padding:0 0.6em 0 0.6em;
}

.over-img {
	line-height: 1.66em;
	background-color:white;
}

.offer-item.offer-item1 { margin: 1.5vw 0 0 0;}
.offer-item.offer-item2 { margin: 6vw 2vw 2vw 6vw; }
.offer-item.offer-item3 { margin: 0 0 0 2vw; }
.offer-item.offer-item4 { margin: 4vw 0 0 6vw; }

.offer-item:hover {
	cursor: pointer;
}

.offer-item > .offer-content > .offer-text > p > .over-img { 
	transition: background-color 0.5s ease;
}
.offer-item:hover > .offer-content > .offer-text > p > .over-img {
	background-color: #F3CE2A;
}

.offer-item > .offer-content > .offer-title > h2 mark { 
	transition: background-color 0.5s ease;
}
.offer-item:hover > .offer-content > .offer-title > h2 mark {
	background-color: #2CF2A3;
}


.cases-item {
	width:40%;
	height:350px;

	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.cases-item:hover {
	cursor: pointer;
}

.cases-item > .cases-title > h2 mark { 
	transition: background-color 0.5s ease;
}
.cases-item:hover > .cases-title > h2 mark {
	background-color: #2CF2A3;
}

.cases-title {
	position:relative;
	float:right;
	top:40px;
	right:-35px;
}
.cases-content {
	padding:0.2em;
}

.cases-item.item1 { margin-left: }
.cases-item.item2 { margin-top:2em }
.cases-item.item3 {  }
.cases-item.item4 { margin-top:3em; margin-right:3em; }


.boxed {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-bottom: 0.66em;
	max-width:1000px;
}

.box-odd {
	padding-left:1.66em;
}

.boxed-item {
	flex: 1;
}

.box-floating {
	z-index: 10;
}

.box-odd > .box-img {
	text-align: right;
}

.floating-title {
	margin-top:1em;
}

.box-even > .box-floating > .floating-title {
	text-align: right;
}

.box-odd > .box-floating > .floating-content {
	padding-left:0.5em;
}

.box-even > .box-floating > .floating-content {
	text-align: right;
	padding-right:0.5em;
}

.box-1 > .box-floating > .floating-title { margin-left: var(--offer1-title-margin); }
.box-2 > .box-floating > .floating-title { margin-right: var(--offer2-title-margin); }
.box-3 > .box-floating > .floating-title { margin-left: var(--offer3-title-margin); }
.box-4 > .box-floating > .floating-title { margin-right: var(--offer4-title-margin); }
.box-5 > .box-floating > .floating-title { margin-left: var(--offer5-title-margin); }

.dotted-box {
	width:25%;
	border: 8px dotted #2CF2A3;
	padding:1em;
	margin-bottom: 1em;
}

.dotted-box > h3 {
	margin-top:0;
}

.dotted-box.even {
	border: 8px dotted #F3CE2A;
}
.dotted-box.odd {
	border: 8px dotted #2CF2A3;
}

.lead-img {
	margin-left:2em;
	margin-top:0.2em;
}
.lead-img.left { margin-left:0; margin-right:1em; }

.lead {
	padding-left: 0.66em;
}

.statement {
	position: relative;
	left:-60px;
	top:20px;
	width:66%;
	align-items: center;
	flex-wrap:wrap;
	background-color:#F3CE2A;
	padding:1em;
}

.course {
	width:25%;
	border: 8px dotted #2CF2A3;
	padding:1em;
	transition: border 0.5s ease;
}
.course > p { 
	margin-top: 0;
}
.course > h2 { 
	margin-top: 0.4em;
}

.course:hover {
	border: 8px dotted #F3CE2A;
}
.course > h2 mark { 
	transition: background-color 0.5s ease;
}
.course:hover > h2 mark {
	background-color: #2CF2A3;
}


#who {
	padding:2em 20% 0 20%;
	display:flex;
	justify-content: space-around;
	position: relative;
	z-index: 10;
}

#who mark { background-color: white; }

#clients {
	margin-top: -5em;
}

.client {
	padding: 0 1em;
	transform: scale(0.8);
}

.circle-portrait {
	width: 250px;
	height: 250px;
	margin-bottom: 0.66em;
	border-radius: 50%;
}

.portrait {
	width: 100%;
	padding: 0 5em 0 5em;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
}

.facilitator-portrait {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	margin:1em 1.33em 1em 0;
}
.facilitator-text {
	width:70%;
	margin:1em 0 1em 0;
}

.signup {
	width:60%;
	margin:2em 0 2em 0;
	padding:20px;
	background-color: #F3CE2A;
}

.cta {
	width:60%;
	margin:2em 0 10em 80px;
	padding:1em;
	background-color: #F3CE2A;
}

#footer {
	display:flex;
	justify-content: space-around;
	align-items:flex-start;
}

#newsletter {
	width:45%;
	padding:1em;
	z-index:10;
	margin-top: 7em;
	margin-left: -1em;
	background-color: #F3CE2A;
}

#location {
	width:20%;
	background-color: #2CF2A3;
	z-index:10;
	padding:1em;
	margin-top:-1.1em;
	margin-left: 1.66em;
}

#cookie-banner {
	width: 40%;
	max-width: 500px;
	position: fixed;
	bottom: -7em;
	right: 0.5em;
	padding: 0.5em;
	z-index: 20;
	background-color: #2CF2A3;
}

#cookie-banner > p {
	font-size: 0.66em;
}

.cookie-button {
	background-color: #2CF2A3;
	display: inline;
 	border: 2px solid white;
 	padding: 0.2em 2em;
 	text-decoration: none;
 	cursor: pointer;
 	text-align: center;
 	margin-right: 0.2em;
}

/* Toggle Classes */
.noscroll {
	overflow:hidden;
	height:100vh;
}
.toggleDisplayBlock {
	display:block;
}
.toggleDisplayInline {
	display:inline;
}

.cookieShow {
	transform: translateY(-100%);
	transition: .4s ease-in-out;
}
.cookieHide {
	transform: translateY(10%);
	transition: .4s ease-in-out;
}