/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstibetan.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstamil.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansethiopic.css);
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
  scroll-padding-top: 8rem;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%;
}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  /* white-space: pre-line; */
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type=radio] {
  vertical-align: text-bottom;
}

input[type=checkbox] {
  vertical-align: bottom;
}

.ie7 input[type=checkbox] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

select, input, textarea {
  font: 99% sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

td, td img {
  vertical-align: top;
}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

h1 strong {
  color: #00cdee;
  font-family: inherit;
  font-weight: inherit;
}

h1 {
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  margin-top: 5.5rem;
}
h1:first-child {
  margin-top: 0;
}

h2 {
  line-height: 100%;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 120%;
  margin: 1rem 0 0.2rem 0;
}
h3 > a {
  color: #00cdee;
}

h4 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 1rem 0 0.2rem 0;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul.horizontal li {
  display: inline-block;
}

li.active a {
  font-weight: 600;
}

.pagination {
  display: flex;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.pagination li {
  padding: 0.5rem;
  font-family: "Karla", sans-serif;
}
.pagination li a {
  font-size: 1.5rem;
}
.pagination li.active {
  background: #00cdee;
}
.pagination li.active a {
  color: #fff;
}
.pagination li.prev a::before {
  background: transparent;
  display: inline-block;
  height: 30px;
  width: 30px;
  content: url("../img/arrow_left_brightblue.svg");
}
.pagination li.nxt a::before {
  background: transparent;
  display: inline-block;
  height: 30px;
  width: 30px;
  content: url("../img/arrow_right_brightblue.svg");
}

article {
  font-family: "Karla", sans-serif;
  color: #001f40;
  font-size: 1rem;
  line-height: 150%;
    padding: 0;
}

article h1, article h2, article .zitat1, article .zitat2, article .linklist1 li, article .linklist2 li {
  font-weight: bold;
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  color: #001f40;
}

/* article > h1:first-of-type {
  line-height: inherit;
} */

article .linklist4
{
  display: flex;
  flex-direction: column;
  gap:0.4rem;
}

article .linklist4 li a {
  display: flex;
  align-items: center;
  gap:1rem;
  color:white;
  padding:0.6rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2rem;
}

article .linklist4 li:not(.gold) a{
  background-color: #00cdee;
}

article .linklist4 li a span {
  text-decoration: underline solid transparent;
  transition: text-decoration .3s ease;
}

article .linklist4 li a span::after {
  content: url(../img/arrow_link_white.svg);
  margin-left: 1rem;
  display: inline-block;
  height: 100%;
  width: 2rem;
  transition: margin-left .3s ease;
  vertical-align: middle;
}

article .linklist4 li a:hover span::after {
  margin-left: 2rem;
  transition: margin-left .3s ease;
}

article .linklist4 li a:hover span {
  text-decoration: underline solid Currentcolor;
}

article .linklist4 li img {
  width:50px;

}

article h1 {
  font-size: 3.5rem;
  margin: 0 0 1.5rem 0;
}
article h2, article .linklist1 li, article .linklist2 li {
  font-size: 2rem;
  margin: 1rem 0;
  line-height: 100%;
}
article a {
  color: #00cdee;
}
article .linklist, article .linklist1, article .linklist2, article .linklist3 {
  list-style-position: inside;
}
article .download {
  font-size: 1.5rem;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
}
article .download::before {
  content: "";
  background-image: url("../img/arrow_download_brightblue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.5rem;
  height: 2rem;
  width: 2rem;
  background-position: center;
}

#waehle-deinen-kurs
{
  margin-top: 100px;
  padding: 20px;
  position: relative;
}

article .zitat1 {
  font-size: 3.5rem;
}
article .zitat2 {
  font-size: 2.5rem;
}
article .zitat3 {
  font-size: 1.25rem;
}
article .linklist1 li a::before,
article .linklist3 li a::before {
  content: "> ";
}
article div:not(.datenschutz) ul > li, article .linklist3 li {
  font-family: "Work Sans", sans-serif;
}
article .linklist3 li, article div:not(.datenschutz) ul > li {
  font-size: 1.25rem;
}

article div.datenschutz ul {
  margin: 20px 30px;

  list-style-type: disc;
}

article .subtitle, article h3 {
  font-weight: bold;
}
article .subtitle {
  text-transform: uppercase;
}
article .linklist a:hover,
article .linklist1 a:hover,
article .linklist2 a:hover,
article .linklist3 a:hover {
  text-decoration: underline;
}

article li.gold a {
  color: #fff;
}

a.arrow {
  display: inline-flex;
  align-items: center;
}
a.arrow::after {
  content: url("../img/arrow_link_brightblue.svg");
  margin-left: 1rem;
  height: 100%;
  width: 2rem;
  display: inline-block;
  align-items: center;
  transition:margin 0.3s ease;
}

a.arrow:hover::after
{
  margin-left: 1.5rem;
  transition:margin 0.3s ease;
}

a.arrow.gold {
  color: #bca25f;
  background: transparent;
}
a.arrow.gold::after {
  content: url("../img/arrow_link_gold.svg");
}

.large {
  font-size: 150%;
  text-transform: uppercase;
  font-weight: 700;
}

.linklist li {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2rem;
  line-height: 100%;
  margin-bottom: 0.25rem;
}
.linklist li a {
  display: inline-flex;
  align-items: center;
}
.linklist li a::after {
  content: url("../img/arrow_link_brightblue.svg");
  margin-left: 1rem;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 2rem;
  transition:margin 0.3s ease;
}

.linklist li:hover a::after {
  margin-left: 1.5rem;
  transition:margin 0.3s ease;
}

.linklist li a.gold {
  color: #bca25f;
  background: transparent;
}
.linklist li a.gold::after {
  content: url("../img/arrow_link_gold.svg");
}

footer ul.nav li:hover a::after {
  margin-right: 0;
  transition:margin 0.3s ease;
}

ul.nav li:hover{
  text-decoration: underline;
}

footer .panel {
  padding-right: 0.5rem;

}

.image-row
{
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  gap:20px;
}

.image-row a {
  width:300px;
  height: 300px;
  object-fit:cover;
}

.image-row a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-image-margin
{
  height: 2rem;
}

@media screen and (max-width: 800px) {

  .linklist li {
    margin-bottom: 1rem;
  }
  .linklist li a::after {
    display: none;
  }

  .card h2 {
    font-size: 1.5rem !important;
  }

  a.arrow::after,
a.arrow.gold::after {
    display: none;
  }
}
header {
  position: fixed;
  width: 100%;
  height: 8rem;
  z-index: 3;
  background-color: white;
}
header img {
  margin: 2.5rem 0;
}

html {
  font-size: 20px;
  font-family: "Karla", sans-serif;
  line-height: 150%;
  color: #001f40;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  padding-top: 8.5rem;
}
main article .container, main .container article  {
  padding-bottom: 6rem;
  padding-top: 2rem;
  flex: 1;
}

main article:first-of-type .container, main:first-of-type article  {
  padding-top: 0;
}

main article:nth-child(even)
{
  background:#EFE8D0;
}

main article .container ul:not(.linklist*) {
  font-size: inherit;
  list-style: circle;
  list-style-position: inside;
  margin-left: 0.5rem;
}
main article .container ul:not(.linklist*) li {
  font-family: "Karla", sans-serif;
  font-size: inherit;
}

iframe {
  max-width: 100%;
}

.inside .auto {
  display: none;
}

.inside {
  max-width: 100%;
}

.container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.partnerlogos li {
  display: inline-flex;
}

ol.box {
  list-style: none;
  counter-reset: box-counter;
  display: flex;
}
ol.box li {
  counter-increment: box-counter;
  color: #fff;
  background: #00cdee;
  flex: 1;
  padding: 1rem;
  padding-left: 3rem;
  margin: 0.5rem;
  position: relative;
}
ol.box li::before {
  content: counter(box-counter);
  font-family: "Work Sans", sans-serif;
  border: 3px solid #fff;
  border-radius: 30rem;
  position: absolute;
  left: 0.25rem;
  height: 2rem;
  width: 2rem;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  margin: 0.25rem;
  justify-content: center;
}

article {
  position: relative;
  max-width: 100%;
  overflow: auto;
}
article .container {
  display: flex;
  flex-direction: row;
}
article .container .panel {
  margin-right: 1.5rem;
  max-width: 480px;
}
article a:hover .subtitle {
  text-decoration: none;
}

.search_results li {
  margin-bottom: 1.5rem;
}
.search_results li a {
  word-break: break-word;
}

.gold {
  background-color: #bca25f;
}

.text {
  text-transform: uppercase;
}
.text.gold {
  background-color: #00cdee;
}
.text.gold:hover {
  text-decoration: underline;
}
.text.gold h2 {
  color: #fff;
  text-decoration: inherit;
}
.text.gold h2 strong {
  color: #001f40;
}
.text h2 {
  padding: 1rem;
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
}
.text h2 strong {
  color: #00cdee;
}

.card {
  max-width: 480px;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 1.5rem;
  background-color: #f5f5f5;
  position: relative;
}

.card span.mehr {
    font-weight: 600;
    font-size: 60%;
    margin-left: 0.5rem;
}

.card span.mehr, .card .subtitle
{
  color: #888888;
  word-wrap: normal;
}

.courseSelection li {
    background: #00cdee;
    margin: 1rem 0;
}

.courseSelection li a {
    color: #fff;
    padding: 1rem;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.5rem;
    line-height: 100%;
}

.citySelection {
  margin-bottom: 1rem;
}
ul.citySelection > li > div.city-header,
ul.citySelection > li > div.gold
{
  background: #00cdee;
  margin: 1rem 0 0 0;
  color: #fff;
  padding: 1rem;
  display: flex;
  align-items: stretch;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.5rem;
  line-height: 100%;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1.25rem;
}

ul.citySelection > li > div.gold {
  background: #bca25f;

}

ul.citySelection > li > div.gold .hover-underline-animation
{
  color:white;
  font-size: 32px;
  font-weight: bold;
  padding: 0;
}

ul.citySelection > li > div.gold span.hover-underline-animation::after{
  content: url(../img/arrow_link_white.svg);
  margin-left: 1rem;
  display: inline-block;
  height: 25px;
  width: 2rem;
  transition: margin-left .3s ease;
  vertical-align: middle;
  margin-top: -11px;
}

.open-closed-sign
{
  width:2rem;
  font-size: 3rem;
}

ul.citySelection > li.closed .city-header .open-closed-sign::after
{
  content:'+';
}

ul.citySelection > li.closed.open .city-header .open-closed-sign::after
{
  content:'-';

}

ul.citySelection > li.open
{
  margin-bottom: 2rem;
}

.courseSelection li.gold {
  background-color: #bca25f;
}

.single-course a
{
line-height: 3rem;
}

.single-course
{
  outline: 6px solid #00cdee;
  border-right: none;
  border-top:none;
  padding:1.5rem;
  line-height: 4rem;
  font-weight: bold;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  font-size:1.5rem;
  color:#00cdee;
}

.single-course-start-date
{
  text-decoration: underline;
}

.courses-in-city
{
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap: 6px;
  padding:0;
  overflow: hidden;
  margin-top: -6px;
}

ul.citySelection > li.closed .courses-in-city
{
  transition: max-height .5s, padding .5s;
  max-height: 0;
  padding:0 6px;
}

ul.citySelection > li.open .courses-in-city
{
  display: grid;
  transition: max-height .5s;
  padding:6px;
  /* Set max-height to something bigger than the box could ever be */
  max-height: 100rem;
}

article .linklist4 li a .hover-underline-animation
{
  color:white;
  margin-top:10px;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #00CDEE;
  padding-bottom:5px;
}

.hover-underline-animation::after {
  content: '';
  /* position: absolute; */
  width: 100%;
  /* transform: scaleX(0); */
  height: 4px;
  bottom: 0;
  left: 0;
  /* background-color: #00CDEE; */
  transform-origin: bottom left;
  transition: transform 0.25s ease-out;
}

p:hover > .hover-underline-animation::after, div:hover > .hover-underline-animation::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.animated-download-container
{
  display: flex;
  align-items: flex-end;
  min-height: 3rem;
  margin-bottom: 0.7rem;
  justify-content: stretch;
}

p.animated-right-arrow {
  display: inline-flex;
  align-items: center;
}
p.animated-right-arrow::after {
  content: url("../img/arrow_link_brightblue.svg");
  margin-left: 1rem;
  width: 2rem;
  display: inline-block;
  align-items: center;
  transition:margin 0.3s ease;
}

p.animated-right-arrow:hover::after {
  margin-left: 2rem;
  transition:margin 0.3s ease;
}

p.animated-up-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}
p.animated-up-arrow::after {
  content: url("../img/arrow-up-brightblue.svg");
  margin-left: 1rem;
  height: 1.2rem;
  aspect-ratio:1;
  display: inline-block;
  align-items: center;
  transition:margin 0.3s ease;
}

p.animated-up-arrow:hover::after {
  margin-bottom: 1rem;
  transition:margin 0.3s ease;
}

div.download-animation
{
  display: flex;
  flex-direction: column-reverse;
  gap:5px;
  align-items: center;
  padding-bottom:5px;
  transition: margin .3s ease;
}

div.animated-download-container:hover div.download-animation
{
  gap:15px;
  transition: gap .3s ease;
}

div.download-animation img
{
  width:40px;
}

.animated-arrows-container
{
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

ul.was-lerne-ich
{
  list-style-type: disc;
  list-type:disc;
  padding: 10px;
}

ul.was-lerne-ich li::marker
{
  padding: inherit;
}

.card h2, .card h3 {
  color: #001f40;
}
.card h2 {
  font-size: 2rem;
  font-weight: inherit;
  line-height: 1;
  margin: 0;
}
.card h3 {
  font-size: 1.5rem;
  font-weight: inherit;
  line-height: 1;
  margin-top: 0;
}
.card h3, .card .subtitle {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}

.card .subtitle {
  padding-bottom: 0;
}

.grid {
  display: flex;
}

.grid-col {
  flex-grow: 1;
  margin-right: 1.5rem;
}

.grid a:hover {
  text-decoration: none;
}
.grid a:hover .text {
  text-decoration-color: currentColor;
  text-decoration-line: underline;
}
.grid a:hover .subtitle + h3 {
  text-decoration-color: #00cdee;
  text-decoration-line: underline;
}

.allcourses {
  margin-top: 1rem;
  text-transform: uppercase;
  font-family: "Work Sans", sans-serif;
  text-align: left;
  color: #fff;
}
.allcourses li {
  padding: 0.5rem;
}

ul.search_results > li {
  font-family: "Karla", sans-serif;
}

.noto {
  font-family: "Work Sans", sans-serif;
}

.noto_tib {
  font-family: "Noto Sans Tibetan", sans-serif;
}

.noto_tam {
  font-family: "Noto Sans Tamil", sans-serif;
}

.noto_eth {
  font-family: "Noto Sans Ethiopic", sans-serif;
}

ul.noto_div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 100%;
  overflow: auto;
}
ul.noto_div > li {
  font-size: 2rem;
  line-height: 110%;
  text-transform: uppercase;
  margin: 0 1rem 1rem 0;
  color: #001f40;
  font-weight: bold;
  flex: 1 0 calc(48% - 1rem);
  background-color: #f5f5f5;
  padding: 0.5rem;
}
ul.noto_div > li strong {
  color: #00cdee;
}

.tableWrapper {
  max-width: 100%;
  overflow-y: auto;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

object, embed, iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1500px) {
  .container {
    max-width: 100%;
    margin-left: calc( 220px + 2.5rem + 1rem );
  }
}
@media screen and (max-width: 1000px) {
  .masonry {
    column-count: 1;
  }

  .courses-in-city
  {
    grid-template-columns:repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  ul.noto_div,
ol.box {
    flex-direction: column;
  }

  ul.noto_div > li {
    font-size: 1.5rem;
  }

  .container {
    margin: 1rem;
  }

  main .container,
footer .container {
    margin: 1rem;
  }
  main table.mobilefix td,
footer table.mobilefix td {
    display: block;
  }

  main article .container {
    padding-top: 150px;
  }

  .articleBadge {
    height: 7rem;
  }
}
nav {
  color: #999999;
  background: transparent;
  transition: transform 0.3s ease-in-out;
  width: 220px;
  left: calc( -1 * 220px + -1 * 2.5rem );
  top: 8.5rem;
  position: absolute;
  font-size: 18px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  max-height: calc(100vh - 8.5rem);
  overflow: auto;
}
nav .nav li,
nav .languageSwitch li {
  text-transform: uppercase;
  font-weight: 700;
  background: #f5f5f5;
  padding: 0;
  margin-bottom: 0.25rem;
  line-height: 25px;
}

nav .nav li a, nav .next ul li a {
  padding: 5px 10px;
  display:block;
}

nav .nav li.active, nav .nav li:hover,
nav .languageSwitch li.active,
nav .languageSwitch li:hover {
  color: #fff;
  background: #00cdee;
}

nav .languageSwitch li:hover a {
  text-decoration: underline;
}
nav .next {
  font-size: 16px;
  margin-top: 25px;
  color: #999999;
  background: transparent;
}
nav .next ul li {
  padding: 0;
  background-color: #f5f5f5;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
nav .next ul li:first-child {
  color: #fff;
  background: #001f40;
  text-transform: uppercase;
  padding: 5px 10px;
  display:block;
}
/* nav .next ul li:last-child {
  color: #fff;
  background: #bca25f;
  text-transform: uppercase;
} */
nav .next ul a {
  display: inline-block;
  line-height: 110%;
}
nav .languageSwitch {
  margin-top: 25px;
  display: flex;
  justify-content: stretch;
}
nav .languageSwitch li {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  margin-right: 0.25rem;
}
nav .languageSwitch li:last-child {
  margin-right: 0;
}
nav .searchBox {
  display: flex;
  align-items: center;
  background: white;
}
nav .searchBox form {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  color: #999999;
}
nav .searchBox input[type=text] {
  width: calc( 100% - 2rem );
  border: 0;
  border-right: 1px solid #999999;
  background: transparent;
  padding: 0.5rem;
  font: 75% sans-serif;
}
nav .searchBox button {
  height: 100%;
  width: 2rem;
  background: transparent;
  border: 0;
}
nav .searchBox button img {
  margin: 0;
}

.buttons .button {
  margin:0;
  padding: 3px 4px;
}

.buttons .button img {
  margin:0px 0 -3px 0;
  padding: 0;
  width:40px;
  height:40px;
}

.buttons {
  position: absolute;
  right: 0;
  margin: 2.5rem 0;
  display: flex;
  gap:5px;
  line-height: 100%;
}

.button, .badge, .urlButton {
  display: inline-block;
  font-size: 18px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  padding: 10px;
  text-transform: uppercase;
}

.button, .badge {
  transition: transform 0.2s ease-out;
}
.button:hover, .badge:hover {
  transform: rotate(-2deg) scale(1.1);
}

.badge {
  background-color: #bca25f;
}

.button-badge{
  display: inline-block;
  font-size: 18px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  color: #fff;
  padding: 10px;
  text-transform: uppercase;
  background-color: #bca25f;
  line-height: 150%;
}

.button, .urlButton {
  background-color: #00cdee;
}

#menuToggle {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
  pointer-events: none;
}

.burgerMenu {
  display: none;
  position: absolute;
  right: 0;
  top: 3rem;
  margin: 3px;
  height: 30px;
  width: 30px;
}
.burgerMenu img {
  margin: 0;
}

ol.schritte {
  display: flex;
  flex-direction: column;
  gap:20px;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "Work Sans", sans-serif;
}

article ol.schritte li {
  border:4px solid #00CDEE;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-basis: 0;
  padding: 20px 80px 20px 40px;
  align-items: center;
  min-height: 7rem;
}

ol.schritte li div
{
  display: flex;
  flex-direction: row;
}
ol.schritte li div strong
{
  margin-top: auto;
}

ol.schritte li:first-child, ol.schritte li:last-child
{
  background:white;
  color:#00CDEE;
}

ol.schritte li:nth-child(2)
{
  background:#00CDEE;
}

ol.schritte li:hover a
{
  text-decoration: underline;
}

ol.schritte li span
{
  font-size: 4rem;
  display: flex;
  align-items: center;
  margin-right: 5rem;
}

ol.schritte li strong
{
  width:50%;
}

ol.schritte li:nth-child(2) a, ol.schritte li:nth-child(2) span
{
  color:white;
}

img.link-arrow
{
  width:110px;
  height:70px;
  transition: margin 0.3s ease;
}

ol.schritte li:hover .link-arrow
{
  margin-left: 0.5rem;
  transition: margin 0.3s ease;
}

/* ol.schritte li:nth-child(2) a::after {
  content: url(../img/arrow_link_white.svg);
  margin-left: 0rem;
  width: 2rem;
  transition: margin-left .3s ease;
}

ol.schritte li:nth-child(2):hover a::after {
  margin-left: 1rem;
  transition: margin-left .3s ease;
} */

ol.schritte li div.download-animation
{
  display: flex;
  flex-direction: column-reverse;
  gap:5px;
  align-items: center;
  padding-bottom:5px;
  transition: all .3s ease;
  transition-property: gap, margin-top;
  width: 110px;
}

ol.schritte li:hover div.download-animation
{
  gap:15px;
  margin-top: -10px;
  transition: all .3s ease;
  transition-property: gap, margin-top;
}

ol.schritte li div.download-animation img
{
  width:90px;
}

@media screen and (max-width: 800px) {

  html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary
  {
    word-wrap: normal;
    hyphens: auto;
  }

  div.download-animation
  {
    width: 5rem;
    margin-bottom: 1rem;
    align-self: stretch;
    justify-content:center;
  }

  .large.hover-underline-animation
  {
      margin-bottom: 1rem;
  }

  p.animated-right-arrow::after
  {
    width: 5rem;
    margin-bottom: 1rem
  }

  article ol.schritte li
  {
      padding: 0.5rem;
  }

  article ol.schritte li span
  {
      margin-right: 0.5rem;
  }

  ul.citySelection > li div.single-course
  {
    font-size: 1.25rem;
    line-height:3rem;
    padding:0.5rem 1.5rem;
  }

  article .linklist4 li a span::after
  {
    display: none;
  }

  article .linklist4 li.gold
  {
    padding-top: 0;
    padding-bottom: 0;
  }

  .open-closed-sign
  {
    width: 1rem;
    font-size: 2rem;
  }

  article .linklist4 li a
  {
    font-size: 1.25rem;
    padding: 0.25rem;
  }

  .grid-col
  {
    margin-right: 0;
  }

  .testimonial .outer.card
  {
    padding:0.5rem;
  }

  .testimonial .content
  {
    font-size: 0.75rem;
    word-wrap:normal;
    hyphens: auto;
  }

  article .testimonial .name, article .testimonial .description
  {
    font-size: 0.75rem;
  }

  .burgerMenu {
    display: inline-block;
  }

  .courses-in-city
  {
    grid-template-columns:repeat(1, 1fr);
  }

  header {
    min-height: unset;
  }
  header > .container > a {
    display: block;
    background: #fff;
  }
  header > .container > a img {
    margin: 3rem 0 0;
  }

  nav {
    top: 100px;
    padding: 1rem;
    left: 0;
    width: 100%;
    transform: translateY(-150%);
    text-align: left;
    max-height: calc( 100vh - 100px );
    background: #fff;
    padding-bottom: 4rem;
  }

  #menuToggle:checked + nav {
    transform: translateY(0);
  }

  .buttons {
    white-space: nowrap;
    overflow: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .buttons a {
    margin-right: .25rem;
  }

}
footer {
  background-color: #00cdee;
  padding: 2.5rem;
  color: #fff;
}
footer .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
footer .container .nav {
  margin-bottom: 1rem;
}

@media screen and (max-width: 800px) {
  footer .container {
    flex-direction: column;
  }
}
form[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.newsfeed section {
  display: flex;
  border-bottom: 1px solid #999999;
}
.newsfeed section .subtitle,
.newsfeed section h3 {
  text-transform: uppercase;
}
.newsfeed section a {
  color: inherit;
}
.newsfeed section a:hover {
  text-decoration: none;
}
.newsfeed section .mt_11 {
  margin-top: -11px;
}
.newsfeed section .subtitle {
  margin-bottom: 0.5rem;
}
.newsfeed section .left {
  flex-basis: 44%;
}
.newsfeed section .right {
  flex-basis: 56%;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.newsfeed section > div {
  padding: 1rem;
}

@media screen and (max-width: 800px) {
  .card {
    max-width: 100%;
  }

  .newsfeed section {
    flex-direction: column;
  }
  .newsfeed section .left {
    flex-basis: 100%;
  }
  .newsfeed section .right {
    flex-basis: 100%;
  }
}

.big {
  font-weight: 600;
  font-size: 56px;
  line-height: 56px;
}

.small {
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
}

.mt2 {
  margin-top: 3rem;
}

.courseDisplay {
  background: #00cdee;
  color: #fff;
  padding: 56px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.applicationForm {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 0.5rem #bca25f solid;
  align-items: center;
  justify-content: space-evenly;
}
.applicationForm img {
  width: 50%;
}
.applicationForm a {
  font-size: 2rem;
  padding: 1rem;
  background-color: #bca25f;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 100%;
}
.applicationForm form {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.applicationForm form label {
  margin-bottom: 0.5rem;
}
.applicationForm form input {
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 0.5rem;
}
.applicationForm form input[type=submit] {
  margin-top: 1rem;
  background-color: #fff;
}

.courseApplication {
  display: flex;
}
.courseApplication > div {
  flex: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table tr th,
table tr th .tablesorter-header-inner {
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}
table tr td {
  padding: 0.375rem;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}
table tr:nth-of-type(even) {
  background-color: #f5f5f5;
}
table tr:nth-of-type(even) td {
  border-color: #fff;
}
table tr.danger td {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  background: rgba(255, 0, 0, 0.2);
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr th {
  outline: none;
}
thead tr th.tablesorter-header .tablesorter-header-inner {
  display: flex;
  align-items: center;
}
thead tr th.tablesorter-header .tablesorter-header-inner::after {
  opacity: 0;
  content: url("../img/arrow_link_dark.svg");
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-left: 0.5rem;
  transform-origin: center;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
thead tr th.tablesorter-headerUnSorted .tablesorter-header-inner::after {
  opacity: 0;
}
thead tr th.tablesorter-headerAsc .tablesorter-header-inner::after {
  opacity: 1;
  transform: rotate(-90deg);
}
thead tr th.tablesorter-headerDesc .tablesorter-header-inner::after {
  opacity: 1;
  transform: rotate(90deg);
}
thead tr th.sorter-false .tablesorter-header-inner::after {
  display: none;
}


.announcement {
  position: absolute;
  display: inline-block;
  color: #fff;
  background: #00cdee;
  padding: 1em;
  font-weight: bold;
  transform-origin: 100% 100%;
  border: solid 4px #EFE8D0;
  right: -4px;
  top: 206px;
  z-index: 2;
}

.tns-outer {
  position: relative;
  margin-bottom: 1rem;
}

.tns-nav {
  position: absolute;
  bottom: 1rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.tns-nav button {
  height: 1rem;
  width: 1rem;
  /* background: #00cdee; */
  background: white;
  border: 3px solid white;
  border-radius: 1rem;
  margin: 0 .25rem;
  transition: background-color .15s ease-in-out;
}

.tns-nav .tns-nav-active {
  background: #00cdee;
}

.testimonial {
  margin: 1rem 0;
}

/* .testimonial .column {
  display: flex;
  max-width: calc(50% - 10px);
  gap: 20px;
  flex-direction: column;
} */

.testimonial .inner {
  display: flex;
  font-family: 'Open Sans', sans-serif;
  gap: 1rem;
}

.testimonial .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.testimonial__container {
  position: relative;
}

.testimonial__container .tns-nav {
  position: absolute;
  bottom: -1rem;
}

.testimonial__container .tns-nav button {
  height: .25rem;
  width: 1rem;
  border-radius: 0;
  background-color: #00cdee;
  border-color: #00cdee;
}

.testimonial__container .tns-nav .tns-nav-active {
  background-color: #fff;
}

.testimonial .outer {
  border: solid 7px rgba(236, 236, 236);
  padding: 30px;
  width: 100%;
}

.testimonial img {
  aspect-ratio: 1/1;
  object-fit: cover;
  height: 8rem;
  width: 8rem;
  border-radius: 8rem;
}

.testimonial .text {
  margin-top: 2rem;
  font-weight: 800;
  line-height: 1;
  margin:2rem 0 1rem 0;
  font-weight: bold;
  font-family: 'Work Sans', sans-serif;
}

.testimonial .text::before {
  content: ",,";
  display: inline-block;
  font-size: 3rem;
  color: #00cdee;
  transform-origin: center;
  transform: rotate(180deg);
  position: absolute;
  top: .5rem;
}

.testimonial .name {
  font-size: .9rem;
  margin-top: .5rem;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Work Sans', sans-serif;
}
.testimonial .description {
  font-size: .9rem;
  line-height: 1;
  text-transform: uppercase;
}

@media screen and (max-width: 800px) {
  .testimonial .inner {
    flex-direction: column;
  }
  .tns-nav button {
    height: .7rem;
    width: .7rem;
  }

  .grid {
    flex-direction: column;
  }

  .courseApplication {
    flex-direction: column;
  }

  .citySelection li a {
    font-size: 1rem;
  }

  .big {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }

  .small {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .applicationForm form {
    padding: 0;
  }
  .applicationForm form label, .applicationForm form input {
    font-size: 1rem !important;
  }

  .courseDisplay {
    padding: 1rem;
  }

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  thead tr::before {
    content: "Sort:";
    font-weight: bold;
    display: block;
    width: 100%;
  }
  thead tr th:nth-child(5), thead tr th:nth-child(6) {
    display: none;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td::before {
    font-weight: bold;
    display: block;
    white-space: nowrap;
    content: attr(data-header);
  }

  td:empty::before {
    content: "";
  }

  td:nth-of-type(6) {
    padding-bottom: 1rem;
    border-bottom: #00cdee solid 2px;
  }
  td:nth-of-type(6) .urlButton {
    width: 100%;
    text-align: center;
  }
  td:nth-of-type(6)::before {
    content: "";
  }

  .announcement {
    transform: unset;
    font-size: small;
    padding: 0.5rem;
  }

  article h1 {
    font-size: 2.3rem;
  }

  article {
    line-height: 125%;
  }

  main article .container, main .container article
  {
    padding-bottom: 3rem;
    padding-top: 1rem;
  }

}





/*# sourceMappingURL=style.min.css.map */