/*  Author:   Martin Stettler (http://dieweberei.ch/)
    Version:  26/07/2018 // BS V4.1.3
*/

/* ==========================================================================
   Browse Happy prompt lte IE 9
   ========================================================================== */

.browsehappy {
    margin: 3px 0;
    background: #CC0033;
    color: #FFF;
    padding: 8px; }

.browsehappy a {
    color: #FFF;
    text-decoration: underline; }

.browsehappy a:hover {
    text-decoration: none; }

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* Bootstrap CSS Overrides */

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    text-align: center;
    background-color: #fff; }

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0; }

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

/* Layout Startseite */
#home h1 {
    color: #00612e;  /* dark green */
    font-weight: 700;
    font-size: 20px;
    margin-top: 42px; }

#home h2 {
    text-transform: uppercase;
}

/* Layout Seiten */
#pages h1, h2 {
    font-size: 35px;
    font-size: calc( 35px +  (45 - 35) * (100vw - 320px)/(1280 - 320));
    color: #fff;
    font-weight: 700; }

#pages h1 {
    background: #00612e;  /* dark green */
    text-transform: uppercase;
    padding: 15px 0;
}
.latest h1,
.latest h2 {
    background: #c50a33;  /* red */
    padding: 15px 0;
}

.latest h1 {
    margin-bottom: 20px; }

.latest h2 {
    margin-bottom: 45px; }

#pages h2,
footer h3 {
    color: #00612e;  /* dark green */
    font-size: 24px;
    font-size: calc( 24px + (32 - 24) * (100vw - 320px)/(1280 - 320));
    font-weight: 700;
    text-transform: normal;
    margin-bottom: 20px;
}

h2 strong {
    color: #c50a33;}

/* Schrift im Quadrat */
.square-box h2{
    font-size: 20px;
    font-size: calc( 20px + (36 - 20) * (100vw - 320px)/(1280 - 320));
}

.square-box:hover h2 {
    font-size: 20px;
    font-size: calc( 20px + (36 - 20) * (100vw - 320px)/(1280 - 320));
    -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
            transform: scale(1.1);
}

#red-title h2{
    color: #c50a33;  /* red */
    padding: 0;
}

h2 em{
    font-size: 20px;
    color: #000;
    font-weight: normal;
    font-style: normal;
}

h3 {
    color: #00612e;  /* dark green */
    font-size: 24px;
    font-size: calc( 24px + (32 - 24) * (100vw - 320px)/(1280 - 320));
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    text-transform: none;
}

h3 strong {
    display: block;
}

p{
    padding-bottom: 45px; }

.lead p {
    color: #00612e; }

strong {
    font-weight: 700;
}

ul {
    margin-top: 0;
    margin-bottom: 16px; }

a {
    color: #00612e;  /* dark green */
}

a:hover {
    color: #c50a33;
}

a,
a:hover {
    text-decoration: none; }

a:focus,
button:focus {
    outline: none; }

/*  Hintergrunfarben */
.bg-dark-green {
    background-color: #00612e;
}
.bg-medium-green {
    background-color: #82a584;
}
.bg-light-green {
    background-color: #b4c8b2;
}
.bg-light-green-article {
    background-color: #cddacb;
}
.bg-red {
    background-color: #c50a33;
} 

/* Hover Quadrate */
.squares-box .bg-dark-green:hover{
    background-color: rgba(0, 97, 46, 0.8);
}
.squares-box .bg-medium-green:hover{
    background-color: rgba(130, 165, 132, 0.8);
}
.squares-box .bg-light-green:hover{
    background-color: rgba(180, 200, 178, 0.7);
}
.squares-box .bg-red:hover{
    background-color: rgba(170, 10, 51, 0.85);
}

/* Links Footer */
.footer a{
    color: #000;
}

.footer a:hover{
    color: #FFF;
}

img {
    width:100%; 
    height:auto;
}

/* ./End Bootstrap CSS Overrides */

/* Anim */
a,
a:hover,
.squares-box .bg-dark-green,
.squares-box .bg-dark-green:hover,
.squares-box .bg-medium-green,
.squares-box .bg-medium-green:hover,
.squares-box .bg-light-green,
.squares-box .bg-light-green:hover,
.squares-box .bg-red,
.squares-box .bg-red:hover,
.navbar-brand,
.navbar-brand.shrink,
.navbar-nav,
.navbar-nav.shrink,
a.link-element,
a.link-element:hover,
.square-box h2,
.square-box:hover h2 {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
        transition: all 0.5s; }

/* Table */
table {
    width: 80%;
    margin-bottom: 45px;
    padding: 0 10vw;
    text-align: left;
    }


table > thead > tr > th,
table > tbody > tr > td {
    width: auto;
    font-size: 18px;
    font-weight: 400;
    vertical-align: middle;
    border: 1px solid #000; }

table > thead > tr > th {
    font-weight: 700; }

table tr th,
table tr td {
  padding: 3px 5px; }

table > tbody > tr > td {
    width: auto;
    }

@media (max-width: 767px){

    table{
        text-align: center;
    }

    /* 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 { 
        position: absolute;
        top: -9999px;
        left: -9999px; }


    table > tbody > tr > td {
        border: 0; }

    table tr td {
      padding: 1px 0; }

    table tr td:first-child{
        font-weight: 700;
    }

    table > tbody > tr > td {
        width: 100%; }

    table > tbody > tr {
        margin-bottom: 20px; }
    
}

.anchor {
    display: block;
    height: 20px;
    margin-top: -20px;
    visibility: hidden; }

/* ==========================================================================
   BRAND NAME
   ========================================================================== */

.navbar-brand.shrink {
    transform: translateY(-300px); }

/* Logo */
.logo span{
    display: block;
    background: url(../img/das-logo.svg) no-repeat;
    background-size: 100% 100%;
    width: 120px;
    height: 120px;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 30px;
}

.claim {
    font-family: 'Pacifico', serif;
    color: #c50a33;
    font-size: 28px;
    margin-bottom: 30px; 
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* Affix: https://www.codeply.com/go/LDHQhWUG0x */
.affix.navbar {
  border-bottom: 1px solid #b4c8b2;
  z-index: 1100; }

/* Offcanvas menu
-------------------------------------------------- */
html,
body {
    overflow-x: hidden; } /* Prevent scroll on narrow devices */
/*
body {
    padding-top: 240px; }*/

@media (max-width: 991.98px) {
    .offcanvas-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 100%; /* left for collapse-left */
        right: -300px; /* left for collapse-left */
        width: 300px;
        padding-right: 16px;
        padding-left: 16px;
        overflow-y: auto;
        visibility: hidden;
        background-color: #e1e8df;
        transition-timing-function: ease-in-out;
        transition-duration: .3s;
        transition-property: right, visibility;
        z-index: 1010; } /* left for collapse-left */

    .offcanvas-collapse.open {
        right: 0; /* left for collapse-left */
        visibility: visible; }

    .navbar-nav {
        margin-top: 100px; }

    /* Hamburger
    -------------------------------------------------- */
    /*!
     * Hamburgers
     * @description Tasty CSS-animated hamburgers
     * @author Jonathan Suh @jonsuh
     * @site https://jonsuh.com/hamburgers
     * @link https://github.com/jonsuh/hamburgers
     */
    .hamburger {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1150;
        padding: 5px; /* 15px 15px */
        display: inline-block;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: #FFF;
        border: 0;
        margin: 0;
        border-radius: 0;
        overflow: visible; }

    .hamburger-inner:hover {
        opacity: 0.7; }

    .hamburger-box {
        width: 40px;
        height: 24px;
        display: inline-block;
        position: relative; }

    .hamburger-inner {
        display: block;
        top: 50%;
        margin-top: 1px; } /* -2px */

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 40px;
        height: 4px;
        background-color: #c50a33;
        /* border-radius: 4px; */
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease; }

    .hamburger.is-active {
        background-color: transparent; }

    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
        background-color: #c50a33; }
      
    .hamburger-inner::before, .hamburger-inner::after {
        content: "";
        display: block; }

    .hamburger-inner::before {
        top: -10px; }

    .hamburger-inner::after {
        bottom: -10px; }

    /* Spin */
    .hamburger--spin .hamburger-inner {
        transition-duration: 0.22s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spin .hamburger-inner::before {
        transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }

    .hamburger--spin .hamburger-inner::after {
        transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spin.is-active .hamburger-inner {
        transform: rotate(225deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

    .hamburger--spin.is-active .hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
      
    .hamburger--spin.is-active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
    }

/* Bootstrap CSS Overrides */
.navbar-brand {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 16px;
    font-size: 20px;
    line-height: inherit;
    white-space: nowrap; }

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, 0.9); }

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: rgba(0, 0, 0, 0.9); }

.nav-link {
  display: block;
  text-align: left;
  font-weight: 400; }

.navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 8px;
        padding-left: 15px; }

.navbar-light .navbar-nav .nav-link {
  color: #00612e; }

.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active > .nav-link {
    color: #c50a33; }

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1); }

.bg-light {
    background-color: #FFF !important; }

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: #dae0e5 !important; } 

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0; }
/* ./End Bootstrap CSS Overrides */

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.main {
    z-index: 1000;
}

/* Articles */
.no-padding h2,
.no-padding p {
    padding-left: 15px;
    padding-right: 15px;
}

.article-content{
   padding-top: 40px;
}

a.link-element {
    display: inline-block;
    min-width: 180px;
    padding: 0px 10px;
    margin: 0 10px;
    color: #FFF;
    background-color: #00612e;
    font-weight: 700;
    line-height: 2.5; }

a.link-element:hover{
    color: #FFF;
    background-color: #82a584;
}

/* mit Farbe gefüllter H2 Balken */
.h-colored-bg{
    padding-top: 8px;
    margin-bottom: 32px; /* 24px */
}

.no-img{
    display: none;
}

/* square boxes */
.square-box{
    position: relative;
    width: 50%;     /* desired width */
}

.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Position H2 im Quadrat */
.square-box h2{ 
    padding-top: 33%;
    padding-left: 20px;
    padding-right: 20px;    
}

/* Darstellung Bild im Quadrat */
.square-one span{
    background: url(../img/square-one-470.jpg) no-repeat;
}

.square-two span{
    background: url(../img/square-three-470.jpg) no-repeat;
}

.square-three span{
    background: url(../img/square-five-470.jpg) no-repeat;
}
.square-box span{
    position: absolute;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} 

/*  Graphic top-squares */
.top-left-corner {
    position: relative;
}
.top-squares {
    position: absolute; 
    top: -280px; 
    left: -195px;
    z-index: 1050;
    display: none;
}

.top-squares span {
    display: block;
    background: url(../img/top-squares.svg);
    background-size: 100% 100%;
    width: 390px;
    height: 450px;
} 


/* Info-Icon */
.das-info {
    margin-bottom: 30px;
}

.das-info p:last-child{
    padding-bottom: 25px;
}

.das-info h3:before{
    content: " ";
    display: block;
    background: url(../img/das-info.svg) no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
    margin: auto;
    margin-bottom: 18px;
}

.das-info h3{
    margin-bottom: 20px;
}

/* Image teacher */
.teacher{
    width: 250px;
    height:250px;
    margin-bottom: 24px;
}

/* Table */
.das-table {
    margin-top: 24px;
    margin-bottom: 60px;
    margin-left: 6vw;
    margin-right: 6vw;
}
  
/* ==========================================================================
   FORM
   ========================================================================== */

#contact {
    position: relative;
    background: #FFF;
    color: #000; }

.help-block {
    margin: 0; }

#contact-form{
    padding-top: 0;
    margin-right: 16px;
    margin-left: 16px;
    padding-bottom: 20px;
}

#contact-form .form-group input,
#contact-form .form-group textarea {
    font-size: 18px;
    padding: 2px 5px; 
    height: auto;
    background-color: #FFF;
    border-radius: 0;
    border: 1px solid #b4c8b;
    font-weight: normal;
    color: #000;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }

label {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    padding-top: 5px;
    padding-left: 0px; }

.form-check-input {
  margin-top: 7px; }

.honeypot {
    display: none; }

#contact-form .list-unstyled li {   /* check default list-style on line 164 */
    padding-left: 0;
    background-color: transparent !important; }

#contact-form .list-unstyled li:before {
    content: ''; }

#success {
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-weight: normal;
    color: #000;
    border: 0;
    border-radius: 0; }

.alert-success,
.alert-danger {
    border-radius: 0; }

.has-error input,
.has-error textarea {
    border: 1px solid #F00 !important;
    margin-bottom: 10px; }

.has-error .help-block {
  color: #ed2939; }

.btn {
    display: block;
    border-color: transparent;
    background-color: #00612e;
    font-size: 20px;
    padding: 5px 10px;
    color: #FFF;
    font-weight: 700;
    border-radius: 0;
    border: 0;
    -webkit-transition: background linear 300ms; }

.btn:hover,
.btn:focus,
.btn.active {
    border-color: transparent;
    background-color: #82a584;
    color: #FFF;
    -webkit-transition: background linear 300ms; }

.form-group {
    color: #525f65;}

.messages {
    background: #FFF;
    color: #000; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Darstellung Quadrate bottom-squares */
footer {
    position: relative;
}

.bottom-squares {
    display: block;
    background: url(../img/bottom-squares.svg);
    background-size: 100% 100%;
    width: 202px;
    height: 202px;
    z-index: 100; 
}

.footer {
  max-width: 1400px;
  margin: 0 auto; }

.footer {
    padding-bottom: 35px;
}

.footer h3 {
    padding: 50px 0 18px 0;
}

.footer p {
    margin-bottom: 0;
}

.footer div:first-child {
    margin-bottom: 60px;
}

.footer div:last-child{
    font-size: 15px;
}

.adr,
.email {
    display: block;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::-moz-selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

::selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

img::selection {
    background: 0 0; }

img::-moz-selection {
    background: 0 0; }

body {
    webkit-tap-highlight-color: #333; }

a[href^="tel"], 
a[href^="sms"]{
    color: inherit; 
    cursor: default; 
    text-decoration: none; }