/******************************************************************************/
/* general CSS
/******************************************************************************/
*, *::before, *::after {
    margin:0;
    padding:0;
   /* box-sizing:border-box;*/
}

@font-face {
    font-family:"Lernkraftwerk-Sign";
    src:
	url("Vollkorn-BoldItalic.woff2") format("woff2");
}
@font-face {
    font-family:"Lernkraftwerk-Title";
    src:
	url("Vollkorn-Bold.woff2") format("woff2");
}
@font-face {
    font-family:"Lernkraftwerk";
    src:
	url("Vollkorn-Regular.woff2") format("woff2");
}
/******************************************************************************/
/* color Variabel                                                             */
/******************************************************************************/
:root {
    --bg:#faf7ed;
    --very-light-green:#e7efc2;
    --light-green:#d5e798;
    --green:#57772e;
    --dark-green:#0c310a;
    --grey1:#d0d4c8;
    --grey3:#c2c4be;
    --grey4:#8d8784;
    --grey5:#1e1414;
}
/******************************************************************************/
/* design-specific below                                                      */
/******************************************************************************/
html {
    height:100%;
}
body {
    align-items:center;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    min-height:100%;
}
body * {
    text-decoration:none;
}
h2, h3, h4, h5, h6 {
    color:var(--dark-green);
    font-family:"Lernkraftwerk-Title";
}
p {
    font-size:1em;
    color:var(--grey5);
    margin-bottom:32px;
}
main li {
    color:var(--grey5);
}
hr {
    display:none;
}
/******************************************************************************/
/* header                                                                     */
/******************************************************************************/
header {
    align-items:baseline;
    background:linear-gradient(90deg, var(--light-green), var(--bg), var(--light-green));
    border-radius:0 0 16px 16px;
    box-shadow:0 4px 6px var(--grey3), 0 6px 8px var(--grey1);
    box-sizing:border-box;
    display:flex;
    /*column-gap:30px;*/
    /*justify-content:flex-end;*/
    padding:0 15px 0 15px;
    position:fixed;
    top:0;
    width:100%;
    z-index:1;
}
header * {
    color:var(--dark-green);
}
h1 {
    align-self:flex-start;
    flex:auto;
}
/* language *******************************************************************/
.lang {
    display:flex;
    list-style-type:none;
}
.lang li {
    background:linear-gradient(var(--bg), var(--light-green));
    border:1px solid var(--light-green);
}
.lang li.active {
    background:linear-gradient(var(--light-green), var(--bg));
    cursor:pointer;
    text-decoration:underline;
}
.lang li:first-child {
    border-radius:16px 0 0 16px;
}
.lang li:last-child {
    border-left:none;
    border-radius:0 16px 16px 0;
}
.lang li:hover {
    background:linear-gradient(var(--light-green), var(--bg));
}
/* menu ***********************************************************************/
nav.main {
    display: flex;
    flex-direction: column;
    position:relative;
}
nav.main label {
    box-sizing:border-box;
    max-width: 100%;
    align-items:baseline;
    display:flex;
    flex:1;
    flex-wrap:nowrap;
    justify-content:flex-start;
    background:linear-gradient(var(--bg), var(--light-green));
    border-style:solid;
    border-width:1px;
    border-color:var(--light-green);
    border-radius:16px;
}
nav.main label > .label {
    margin-left:5px;
}

nav.main .burger {
    background:var(--dark-green);
    height:2px;
    width:20px;
    position:relative;
    bottom:7.7px;
}
nav.main .burger::before, nav.main .burger::after {
    background:var(--dark-green);
    content:'';
    height:100%;
    position:absolute;
    width:100%;
}
nav.main .burger::before {
    top:-6px;
}
nav.main .burger::after {
    top:6px;
}
nav.main menu {
    display:none;
    list-style-type:none;
    padding-bottom:6px;
}
nav.main li {
    color:var(--dark-green);
    padding:0px 15px;
}
nav.main li:hover {
    text-decoration:underline;
}
nav.main .active {
    text-decoration:underline;
}
/* call to action *************************************************************/
header > .callnow {
    margin-left:5px;
    margin-right:5px;
}
header .callnow:hover {
    text-decoration:underline;
    transform:scale(1.1);
}
/* header home ****************************************************************/
main.home {
    width:100%;
}
header#home h1 {
    font:3.7em "Lernkraftwerk-Sign";
}
header#home > :not(h1) {
    font:1.5em sans-serif;
}
header#home nav.main menu {
    background:linear-gradient(var(--light-green), var(--bg));
}
/* header sub pages ***********************************************************/
header.sub {
    padding-top:3px;
}
header.sub h1 {
    font:25px "Lernkraftwerk-Sign";
}
header.sub > :not(h1) {
    font:1em sans-serif;
}
header.sub li {
    padding:1px 10px;
}
/******************************************************************************/
/* main                                                                       */
/******************************************************************************/
main {
    display:flex;
    flex-wrap:wrap;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    justify-content:center;
}
main h2 {
    font-size:1.9em;
    padding-bottom:0;
    margin:1em 0 0.2em 0;
}
main article h2{
    font-size:1.9em;
    margin:0 0 0.2em 0;
}
main h3 {
    margin:1em 0 0.2em 0;
    font-size:1.6em;
}
main h4 {
    margin:0.5em 0 0 0;
    font-size:1.4em;
}
main.detail table a,
main section.text p a,
section.right a,
section.half a,
section.text a {
    color:var(--green);
}
main.detail table a:hover,
main section.text p a:hover,
section.right a:hover,
section.half a:hover,
section.text a:hover{
    color:var(--grey5);
    text-decoration:underline;
}
main section.breadcrumb {
    margin-top:5px;
    margin-left:15px;
    width:100%;
}
main section.breadcrumb p {
    color:var(--grey5);
    margin-bottom:0;
}
main section.breadcrumb a {
    color:var(--green);
}
main section.breadcrumb a.parent {
    color:var(--grey5);
    font-weight:800;
}
main section.breadcrumb a:hover {
    color:var(--grey5);
    text-decoration:underline;
}
main section.breadcrumb a.active {
    color:var(--grey5);
    text-decoration:underline;
}
main section.text {
    display:flex;
    flex-wrap:wrap;
    margin:0 auto 0 auto;    
    flex-direction:column;
    margin-bottom:1em;
}
main section.text p {
    width:100%;
    margin:0.2em 0 0.2em 0;
}
main section.text ul {
    /*width:100%;*/
    margin:0.2em auto 0.2em 0;
}
main section.text ul li {
    margin:0.2em auto 0.2em 25px;
}
main a {
    display:inline-block;
}
main a.download_pdf::before {
    content:'📝 ';
}
main a.email {
    color:var(--green);
}
main a.email:hover {
    color:var(--grey5);
    text-decoration:underline;
}
main a.email::before {
    content:'📧 ';
}
main a.external::before {
    content:'🌐 ';
}
/* call to action button ******************************************************/
.callnow-button {
    background:linear-gradient(var(--bg), var(--light-green));
    border-radius:2em;
    box-shadow:0 4px 4px 2px var(--grey3), 0 6px 6px 2px var(--grey1);
    color: var(--grey5);
    display:flex;
    font-family:"Lernkraftwerk";
    font-size:2em;
    margin:15px auto 32px auto;
    padding:0.5em 1.5em 0.5em 1.5em;
    text-align:center;
    width:fit-content;
}
.callnow-button:hover {
    background:linear-gradient(var(--light-green), var(--bg));
    box-shadow:0 4px 4px 1px var(--grey4), 0 6px 6px 4px var(--grey3);
    transform:scale(1.1);
}

/* Home ***********************************************************************/
main.home {
    display:flex;
    /*margin-top:140px;*/
    text-align:center;
    width:96%;
}
main.home h2 {
    font-size:2.2em;
}
main.home h3 {
    font-size:1.9em;
    margin:0.2em 0 1.2em 0;
}
main.home p {
    font-size:1.7em;
    margin-top:32px;
    width:450px;
}

main.home > section {
    align-items:center;
    display:flex;
    flex-direction:column;
    margin-left:30px;
}

main.home > section {
    margin-right:6em;
    padding:70px 0;
}
main.home > figure.slideshow {
    flex-grow:2;
}

figure.slideshow {
    margin:1.5em;
    position:relative;
}
figure.slideshow img {
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    object-fit:cover;
    border-radius:16px;
    opacity:0;
    animation-name:slideshow-fade;
    animation-duration:108s; /* must be equal to:<number of images> * 9s, 9s as in animation-delay */
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
figure.slideshow img:first-child {
    animation-delay:0;
    opacity:0.5;
}
figure.slideshow img:nth-child(n) {animation-delay:calc(var(--slideshow-imgnr)*9s);}

@keyframes slideshow-fade {
    0% {opacity:0;}
    2% {opacity:0.5;}
    4% {opacity:1;}
    9% {opacity:1;}
    11% {opacity:0.5;}
    13% {opacity:0;}
    100% {opacity:0;}
}
/* Gymi simply ****************************************************************/

/* courses image under one an other *******************************************/

main.courses a.half{  
    margin:0 1em 2.5em 1em;
}
main.courses article.courses {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    border-radius:16px; 
    box-shadow:0 0 6px var(--grey3), 0 0 8px var(--grey1);  
}
main.courses article#Grundlagenkurs, main.courses article#Pruefungskurs,
main.courses article#Sportferienkurs, main.courses article#Aufsatzkurs {
    background-size:100% auto;
    /*background-position:top center;*/
    background-position:bottom center;
    background-repeat:no-repeat;
}
main.courses article#Grundlagenkurs:hover, main.courses article#Pruefungskurs:hover,
main.courses article#Sportferienkurs:hover, main.courses article#Aufsatzkurs:hover {
    transition:all 1s;
    transform:scale(1.05);
}
main.courses h2 {
    text-align:center;
    width:100%;
}
main.courses a.half {
    display:flex;
    margin:0 1em 2.5em 1em;
}
section#sourses article.courses {
    display: flex;
    flex-direction: column;
    height:100%;
}
main.courses article.courses > :not(img) {
    padding:0 2% 0 2%;
 
}
main.courses article.courses h4 {
    margin-top:0.1em;
}
main.courses article.courses p:last-of-type {
    flex-grow: 4;
}
main.courses article.courses img {
    align-self: flex-end;
    border-radius: 0 0 16px 16px;
    height: auto;
    width: 100%;
    box-shadow: 0 0 6px var(--grey3), 0 0 8px var(--grey1);
}
main.courses p.callnow-button {
    margin-bottom:1em;
}
/* cours detail ***************************************************************/
main.detail h3 {
    margin:1em auto 0.5em 0;
}

main.detail p {
    width:100%;
    margin-bottom:0.5em;
    box-sizing: border-box;
}

main.detail p.callnow {
    margin:3em auto 2em auto;
}

main.detail table {
    margin:2em 0 2em 0;
    border-collapse:collapse;
    width: 100%;
}

main.detail table th {
    text-align:left;
}

main.detail table tr.odd {
    border-bottom:solid;
    border-top:solid;
    border-bottom-width:1px;
    border-top-width:1px;
    border-color:var(--green);
    background:linear-gradient( 
            var(--light-green), var(--very-light-green));
}

main.detail table tr h5, main.detail table tr td {
    font-size:1em;
}

main.detail table tr th, main.detail table tr td {
    padding-left:5px;
}

main.detail table tr.even td {
    background-color:var(--bg);
    border-top-width:1px;
    border-color:var(--dark-green);
}

main.detail details {
    /*width:100%;*/
    margin:10px 0 10px 0;
}

main.detail details>* {
    padding-left:25px;
    margin-top:1em;
}

main.detail details summary {
    cursor:pointer;
    list-style-type:none;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    border-bottom:solid;
    border-top:solid;
    border-bottom-width:1px;
    border-top-width:1px;
    border-color:var(--green);
    background:linear-gradient(90deg, var(--bg), 
            var(--very-light-green) 5% 95%, var(--bg));
}

main.detail details summary::after {
    content:"\002B";
    font-size:3em;
    font-weight:bold;
    margin-right: 25px;
}

/*main.detail details details summary::after {
    font-size:1.4em;
}*/

main.detail details[open]>summary::after {
    transform:rotate(45deg);
}

main.detail details summary h3 {
    margin:0 -40px 0 0;
}

main.detail details summary h4 {
    margin:0 -40px 0 0;
}

main.detail details summary ul {
    font-size:1.2em;
    margin:0 -40px 0 0;
}

main.detail details table .color {
    background:var(--light-green);
    border-bottom:solid;
    border-top:solid;
    border-bottom-width:1px;
    border-top-width:1px;
    background:linear-gradient( 
            var(--light-green), var(--very-light-green));
}

main.detail details table .last {
    border-bottom:none;
}  

main.detail details table tr td.center {
    text-align:center;
}

main.detail details table tr td.center ul {
    padding:0 60% 0 20%;
}

main.detail details details table tr td ul li{
    margin-left:15px;
}

main.detail details.list li {
    list-style-type:square;
    margin-left:40px;
    padding-left:5px;
}


/* Stipendium *****************************************************************/

/* material *******************************************************************/

/* location *******************************************************************/
main.location * {
    width:100%;
    text-align:center;
}

main.location p {
    text-align:left;
}

main.location a{
    margin:1%;
}

main.location a.left {
    margin:1em auto 1em auto;
}
main.location img {
    object-fit:cover;
}
main.location section {
    align-content: space-between;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
main.location section address {
    text-align:center;
    margin:1em 0 1em 0;    
}

/* team ***********************************************************************/
main.team {
    align-content:flex-start;
    justify-content:flex-start;
}
main.team a {
    margin: 0 auto;
}

main.team article.team {
    background:var(--light-green);
    text-align:center;
    height:500px;
    margin:1em;
    border-radius:16px;
    box-shadow:4px 4px 6px var(--grey3), 6px 6px 8px var(--grey1);
    overflow:hidden;
}

article.team img {
    border-radius:16px 16px 0 0;
    height:400px;
    margin:0 0 0.2em 0;
    object-fit:cover;
    box-shadow:0 3px 6px var(--green), 0 4px  8px var(--light-green);
}


article.team:hover {
    transition:all 1s;
    transform:scale(1.05);
}

article.team h3 {
    margin:0 auto 0 auto;
}

article.team h4 {
    font-family:"Vollkorn";
    font-style:italic;
    font-weight:500;
    margin:0 auto 0.1em auto;
}

article.team p {
    font-size:1em;
}

/* team detail ****************************************************************/
main.teamdetail { 
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:flex-start;
    width:96%;
}

main.teamdetail img {
    border-radius:16px;
    display:block;
    object-fit:cover;
}

main.teamdetail section.teamdetailtext {
        align-self:flex-start;
}

main.teamdetail p {
    margin-right:auto;
    margin-bottom:2em;
}

/* contact ********************************************************************/
main.contact {
    flex-direction:column;
}

main.contact img {
    border-radius:16px;
    display:block;
    object-fit:cover;
    object-position:10% 15%;
    margin-bottom:30px;
}

form.contact {
    margin-bottom:40px;
}

form.contact button {
    border-color:var(--very-light-green);
    border-radius:8px;
    background-color: var(--light-green);
    color:var(--dark-green);
    font-family: "Lernkraftwerk-Title";
    font-size:1.3em;
    font-weight:400;
    height:32px;
    width:100%;
}

form.contact fieldset {
    border-radius:5px;
    margin:5px 5px 16px 5px;
}

form.contact fieldset label {
    font-weight:normal;
}


form.contact label {
    color:var(--dark-green);
    font-weight:bold;
    margin-left:5px;
}

form.contact label.error {
    color:red;
    display:block;
    font-weight:normal;
    margin-bottom:15px;
}

form.contact span.req {
    color:red;
}

form.contact legend {
    color:var(--dark-green);
    font-weight:bold;
    margin-left:3px;
    padding:0 3px 0 3px;
}

form.contact input:not([type="checkbox"]) {
    border:1px solid var(--grey1);
    border-radius:3px;
    height:24px;
    margin:0 5px 8px 5px;
    padding:2px 5px 1px 5px;
    width:95%;
}

form.contact input[type="checkbox"] {
}


form.contact textarea {
    border:1px solid var(--grey1);
    border-radius:5px;
    padding:3px;
    margin-left:5px;
    min-height:20px;
    min-width:95%;
    width:95%;
}


/* anmeldung *******************************************************************/
form.booking {
    display:flex;
    flex-wrap:wrap;
    width:98%;
    max-width:900px;
}
form.booking h3 {
    width:100%;
}
form.booking div.fullwidth{
    width:100%;
}
form.booking fieldset.fullwidth{
    width:95%;
}
form.booking button{
    width:95%;
}
/* impressum ******************************************************************/
main section.halfhalf {
    display:flex;
    margin-bottom:-50px;
}
/******************************************************************************/
/* carousel                                                                   */
/******************************************************************************/
.carousel-container {
    max-width:1200px;
    position:relative;
    perspective:1000px;
    width:98%;
}
.carousel-track {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transform-style:preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel_img {
    position:absolute;
    border-radius:16px;
    overflow:hidden;
    /*box-shadow:0 0 3px var(--grey3), 0 0 4px var(--grey1);*/
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel_img img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:25% 35%;
}
.carousel_img.center {
    z-index:10;
    transform:scale(1.1) translateZ(0);
}
.carousel_img.left-1,
.carousel_img.right-1 {
    z-index:5;
    transform: scale(0.9) translateZ(-100px);
}
.carousel_img.left-2,
.carousel_img.right-2 {
    z-index:1;
    transform: scale(0.8) translateZ(-300px);
}
.carousel-track > :not(section.center) {
    filter:grayscale(100%);
}
.carousel_img.left-1{
    transform: translateX(-200px) scale(0.9) translateZ(-100px);
}
.carousel_img.left-2{
    transform: translateX(-400px) scale(0.8) translateZ(-300px);
}
.carousel_img.right-1{
    transform: translateX(200px) scale(0.9) translateZ(-100px);
}
.carousel_img.right-2{
    transform: translateX(400px) scale(0.8) translateZ(-300px);
}
.carousel_img.hidden {
    opacity:0;
}
.dots {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
    margin-bottom:20px;
    width:98%;
}

.dot {
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--light-green);
    cursor:pointer;
    transition:all 0.3s ease;
}
.dot.active {
    background:var(--green);
    transform:scale(1.2);
}
.nav-arrow {
    font-family:"Lernkraftwerk-Title";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:var(--light-green);
    color:var(--green);
    font-size: 40px;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    transition:all 0.3s ease;
    border:none;
}
.nav-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}
.nav-arrow.left {
    left:20px;
    padding-right:5px;
}
.nav-arrow.right {
    right:20px;
    padding-left:5px;
}

/******************************************************************************/
/* footer                                                                     */
/******************************************************************************/
footer {
    background:linear-gradient(90deg, var(--light-green), var(--bg), var(--light-green));
    display:flex;
    justify-content:flex-end;
    align-items:center;
    align-self:flex-end;
    height:48px;
    margin-top:auto;
    width:100%;
}

footer a {
    color:var(--dark-green);
    margin-right:20px;
}

footer a:hover {
    color:var(--grey5);
    text-decoration:underline;
}
/*******************************************************************************
scroll-to-top button
*******************************************************************************/
.scroll-to-top {
  opacity:0.5;
  position:relative;
  cursor:pointer;
}
.scroll-to-top span.pos {
  position:fixed;
  bottom:50px;
  right:20px;
  z-index:20;
}
.scroll-to-top span.style {
  background-color:var(--green);
  border:2px solid var(--bg);
  border-radius:50%;
  height:50px;
  width:50px;
  color:var(--bg);
  cursor:pointer;
  animation:movebtn 3s ease-in-out infinite;
  transition:all 0.5s ease-in-out;
  font-size:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  visibility:hidden;
}
.icon-style:hover {
  animation:none;
  background:#fff;
  color:#6890a0;
  border:2px solid #551b54;
}
@keyframes movebtn {
  0% {
    transform:translateY(0px);
  }
  25% {
    transform:translateY(10px);
  }
  50% {
    transform:translateY(0px);
  }
  75% {
    transform:translateY(-5px);
  }
  100% {
    transform:translateY(0px);
  }
}
/******************************************************************************/
/* screen-specific                                                            */
/******************************************************************************/
/* header *********************************************************************/
@media (max-width:1330px) {
    header nav.main:hover > label {
        box-shadow:0 5px 5px var(--dark-green);
        border-radius:16px 16px 0 0;
        background:linear-gradient(var(--light-green), var(--bg));
    }
    header nav.main:hover > menu {
        height: auto;
        box-shadow:0 5px 5px var(--dark-green);
        border-radius:0 0 16px 16px;
        visibility: visible;
    }
    header nav.main menu {
        height: 0;
        display: block;
        overflow: hidden;
        visibility: hidden;
    }    
}
@media (max-width:680px) {
    header {
	    background:linear-gradient(var(--light-green), var(--bg), 60%, 
	        var(--light-green));
    }
}
@media (min-width: 361px) and  (max-width: 390px) {
    header {
        padding: 3px 15px 0 15px
    }
    header .lang {
        order: 2;
    }
    header nav.main {
        order: 1;
    }
    header .callnow {
        margin-top:5px;
    }
}
@media (max-width: 360px) {
    header {
        height: 100px;
    }
    header h1 {
        width: 100%;
    }
    header nav.main {
        margin-top: 5px;
        order: 1;
        width: 100%;
    }
}

/* header.sub *****************************************************************/
@media (min-width:1181px) {
    header.sub nav.main label {
        display:none;
    }    
    header.sub nav.main menu {
        display: flex;
        visibility:visible;
        height:100%;
    }
    header.sub nav.main li {
        display:inline-block;
    }
    header.sub nav.main a {
        width:auto;
    }
}
@media (max-width:1180px) {   
    header.sub span.burger {
        display:inline-block;
    }    
    header.sub span.burger::before, span.burger::after {
        display:block;
    }    
    header.sub nav.main label {
        display:flex;
        padding-left: 15px;
    }    
    header.sub span.burger {
        bottom: 5px;
    }
    header.sub span.label {
        display:flex;
    }    
    header.sub nav.main menu {
        background:linear-gradient(var(--light-green), var(--bg));
        /*visibility:collapse;*/
    }
    header.sub nav.main li {
        display:flex;
    }
   header.sub  nav.main a {
        background:none;
        border:none;
        width:100%;
    }
}
@media (min-width:681px){
    header.sub {
        height:35px;
    }
}
@media (min-width:721px) and (max-width:1180px) {   
    header.sub {
        column-gap:30px;
    }
}
@media (min-width:681px) and (max-width:720px) {
    header.sub {
        column-gap:10px;
    } 
}
@media (max-width:680px) {
    header.sub {
	    flex-wrap:wrap;
	    justify-content:space-between;
    }
}
@media (min-width:361px) and (max-width:680px) { 
    header.sub {
	    height: 70px;
    }
}
@media (min-width:471px) and (max-width:680px) {
    header.sub h1 {
	    width:100%;
    }
}

@media (min-width: 391px) and (max-width: 470px) {
    header.sub h1 {
        margin-right:20px;
    }
}

/* header#home ****************************************************************/
@media (min-width:1131px) {
    header#home {
        height:111px;
        column-gap:30px;
    }
    header#home h1 {
        margin-top: 10px;
    }
    header#home > :not(h1) {
        margin-top:30px;
    }
    header#home nav.main:hover > label {
        box-shadow:0 5px 5px var(--dark-green);
        border-radius:16px 16px 0 0;
        background:linear-gradient(var(--light-green), var(--bg));
    }
    header#home nav.main:hover > menu {
        height: auto;
        box-shadow:0 5px 5px var(--dark-green);
        border-radius:0 0 16px 16px;
        visibility: visible;
    }
    header#home nav.main menu {
        height: 0;
        display: block;
        overflow: hidden;
        visibility: hidden;
    }
}
@media (min-width: 781px) and (max-width:1130px) {
    header#home {
	    column-gap:15px;
    }
    header#home {
	    height:56px;
    }
    header#home h1 {
        margin-top: 0;
	    font-size:2.5em;
    }
    header#home > :not(h1) {
	    margin-top:5px;
    }
}
@media (min-width:981px) {
    header#home .lang li:first-child {
        padding:5px 7px 5px 15px;
    }
    header#home .lang li:last-child {
        padding:5px 15px 5px 7px;
    }

    header#home nav.main label {
        padding:5px 15px;
    }
}
@media (max-width:980px) {
    header#home > :not(h1) {
	    font-size: 1em;
    }
    header#home li {
        padding:1px 10px;
    }
    header#home span.burger {
        bottom: 5px;
    }
    header#home nav.main label {
        display:flex;
        padding-left: 15px;
    } 
}
@media (min-width: 781px) and (max-width:980px) {
    header#home > :not(h1) {
	    margin-top:15px;
    }
}
@media (max-width:780px) {
    header#home {
        background:linear-gradient(var(--light-green), var(--bg),var(--light-green));
	    flex-wrap:wrap;
	    justify-content:space-between;
	    padding-bottom:5px;
    }
}
@media (min-width:481px) and (max-width:780px) {
    header#home {
	    height:86px;
    }
    header#home h1 {
        width: 100%;
        font-size:2.5em;
    }
    header#home > :not(h1) {
        margin-top: 0;
    }
}
@media (min-width:391px) and (max-width:480px) {
    header#home {
        height:86px;
        column-gap: 5px;
    }
    header#home h1 {
        font-size: 2em;
    }
    header#home .lang {
        margin-top: 8px;
    }
    header#home .main, header#home .callnow {
        margin-top: 0;
    }
}
@media (min-width:361px) and (max-width:390px) {
    header#home {
        height:70px;
        column-gap: 5px;
    }
    
}
@media (max-width:390px) {
    header#home h1 {
        font-size: 25px;
    }
}

/* main.home ******************************************************************/
@media (min-width:1131px) {
    main.home {
        margin-top:140px;
    }
}
@media (min-width:781px) and (max-width:1130px) {
    main.home {
	    margin-top:56px;
    }
}
@media (min-width:481px) and (max-width:780px) {
    main.home {
	    margin-top:86px;
    }
}
@media (min-width:401px) and (max-width:480px) {
    main.home {
	    margin-top:86px;
    }
}
@media (min-width:361px) and (max-width:391px) {
    main.home {
	    margin-top:70px;
    }
}
@media (max-width:1130px) {
    main.home > section {
	    padding-left:1em;
	    margin-right:0;
    }
}
@media (max-width:1080px) {
    main.home {
	    height:100%;
	    flex-direction:column;
    }
    main.home > section {
	    padding:0;
	    margin-left:0;
    }
    main.home > figure.slideshow {
	    flex-grow:0;
	    min-height:500px;
	    margin-left:auto;
	    margin-right:auto;
	    width:96%;
    }
}
@media (min-width:451px) and (max-width:550px) {
    main.home h2 {
	    font-size:2em;
    }
    main.home > figure.slideshow {
        min-height:300px;
    }
}
@media (max-width:450px) {
    main.home > section {
	    margin-left:0;
    }
    main.home h2 {
	    font-size:1.7em;
    }
    main.home h3 {
	    font-size:1.5em;
	    margin-bottom: 0.5em;
    }
    main.home p {
	    font-size 1.2em;
	    margin-top: 5px;
	    width:90%;
    }
    main.home > figure.slideshow {
        min-height:250px;
    }
}
@media (max-width:380px) {
    main.home h2 {
	    font-size:1.5em;
    }
    main.home h3 {
	    font-size:1.2em;
    }
    main.home p {
	    font-size: 1em;
	    width:90%;
    }
    main.home > figure.slideshow {
        min-height:200px;
    }
}

/* main ***********************************************************************/
@media (min-width: 681px){
    main {
        margin-top: 35px;
    }
}
@media (max-width: 680px) {
    main {
        margin-top:70px;
    }
}
@media (max-width: 360px) {
    main {
        margin-top: 100px;
    }
}
@media (max-width:450px) {
    main article h2 {
        font-size:1.5em;
    }
    main article h3 {
        font-size:1.2em;
    }
}
@media (min-width:1000px) {
    main section.text {
        width:900px;
    }
    main.location {
        width:900px;
    }
    main.location a.left {
        width:50%;
    }
    main.location section.right {
        width:50%;
    }
    main.location a.third {
        width:30%;
    }
    main.courses a.half {
        width:45%;
    }

    main.teamdetail img {
        width:35%;
        height:auto;
        margin:1em 0 1em 0;
        object-position:50% 15%;
    }
    main.teamdetail section.teamdetailtext {
        width:50%;
        margin:1em auto 1em 2em;
    }
    main.teamdetail h2, main.teamdetail h3, main.teamdetail h4, {
        margin:0 auto 0.5em 0;
    }
}
@media (min-width:701px) {
    main section.halfhalf {
        flex-direction:row;
    }
    main section section.half {
        width:48%;
        margin:0 auto 1em 0;
    }
}

@media (max-width:1000px) {
    main section.text {
        width:95%;
    }
    main.location {
        width:95%;
    }
    main.location a.left {
        width:100%;
    }
    main.location section.right {
        width:100%;
        min-height: 200px;
    }
    main.location a.third {
        width:100%;
    }
    main.courses a.half {
        width:100%;
    }
    main.teamdetail img {
        width:100%;
        height:500px;
        object-position:15% 15%;
    }
    main.teamdetail section.teamdetailtext {
        width:100%;
    }
}
@media (max-width:700px) {
    main section.halfhalf {
        flex-direction:column;
    }
    main section section.half {
        width:96%
    }
}
@media (max-width:550px) {
    main.team article.team {
        width:90%;
    }
    main.team article h3 {
        font-size: 1.2em;
    }
    main.team article h4 {
        font-size: 1em;
    }
    main.team article p {
        font-size: 0.8em;
    }
    main.team article img {
        width: 100%;
    }
    main.teamdetail img {
        width:100%;
    } 
}
@media (max-width:450px) {
    main.team article.team {
        width:90%;
        height: 400px;
    }
    main.team article.team > :not(img) {
        padding: 0 5px;
    }
    main.team article img {
        width: 100%;
        height: 290px;
    }
    main.teamdetail img {
        width:100%;
    }
    
}
@media (min-width:1300px) {
    main.team, main.courses{
        max-width:1300px;
    }
    main.team section.text {
        margin:0 auto 0 auto;
        width:900px;
    }
}
@media (max-width:1300px) {
    main.team, main.courses {
        max-width:95%;
    }
    main.team section.text {
        width:100%;
    }
}
/* callnow ********************************************************************/
@media (max-width:450px) {
    .callnow:hover {
	    transform:scale(1);
    }
    .callnow-button {
	    font-size:1.2em;
    }
    .callnow-button:hover {
	    transform:scale(1);
    }
}
/* carousel *******************************************************************/
@media (max-width: 1000px) {
    .carousel_img.left-2,
    .carousel_img.right-2 {
        display: none;
    }
}

@media (min-width: 901px) {
    .carousel-container {
        height:480px;
    }
    .carousel_img {
        width:600px;
        height:400px;
    }
}

@media (min-width: 901px) and  (max-width: 1000px) {
    
}

@media (min-width: 751px) and  (max-width: 900px) {
    .carousel-container {
        height:400px;
    }
    .carousel_img {
        width:500px;
        height:330px;
    }
    .carousel_img.left-1{
        transform: translateX(-150px) scale(0.9) translateZ(-50px);
    }
    .carousel_img.right-1{
        transform: translateX(150px) scale(0.9) translateZ(-50px);
    }
}

@media (min-width: 601px) and  (max-width: 750px) {
    .carousel-container {
        height:360px;
    }
    .carousel_img {
        width:450px;
        height:300px;
    }
    .carousel_img.left-1{
        transform: translateX(-100px) scale(0.9) translateZ(-50px);
    }
    .carousel_img.right-1{
        transform: translateX(100px) scale(0.9) translateZ(-50px);
    }
    .nav-arrow.left {
        left:5px;
    }
    .nav-arrow.right {
        right:5px;
    }
}
@media (min-width: 551px) and  (max-width: 600px) {
    .carousel-container {
        height:330px;
    }
    .carousel_img {
        width:400px;
        height:260px;
    }
    .carousel_img.left-1{
        transform: translateX(-100px) scale(0.9) translateZ(-50px);
    }
    .carousel_img.right-1{
        transform: translateX(100px) scale(0.9) translateZ(-50px);
    }
    .nav-arrow.left {
        left:5px;
    }
    .nav-arrow.right {
        right:5px;
    }
}

@media (max-width: 550px) {
    .carousel-container {
        height:390px;
    }
    .carousel_img {
        width:90%;
        height:auto;
    }
    .carousel_img.left-1,
    .carousel_img.right-1{
        display:none;
    }
    .nav-arrow.left {
        left:5px;
    }
    .nav-arrow.right {
        right:5px;
    }
}
@media (max-width:500px){
    .carousel-container {
        height:350px;
    }
    .dots {
        gap:5px;
    }
}
/* contact ********************************************************************/
@media (min-width:601px) {
    form.booking div.half {
        width:48%;
        margin-right:1%;
    }
}
@media (max-width:600px) {
    form.booking div.half {
        width:100%;
    }
}
/* course tables***************************************************************/
@media (width < 500px) {
    table.responsive  tr {
	display:flex;
	flex-direction:column;
    }
    table.responsive th,
    table.responsive td {
	display:block;
	text-align:center !important;
    }
    table.responsive th.action {
	display:none;
    }
    table.responsive td > a {
	font-size:1.2em;
	font-weight:bold;
    }
}