/*!
 * LEGEND - Responsive Template
 *
 * Copyright 2020
 * Created by: frauKD
 * URL: http://frauKD.de
 * Designed and built based on my brain and everybody I'm learning from. THX */

/*
===========================
CONTENTS:

01 Sensible Defaults
02 Grid Layouts
03 Typography
04 Navbar
05 Kalligrafie
06 Style
07 Media Queries
===========================
*/

/* ----------------------------------------------------------------------------------------------------------
01 Sensible Defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
#clear {
        clear: both;
}

/* Responsive TABLE */

* {
        box-sizing:border-box;
}

table {
        width:100%;
}

table, td, tr, th {
        border:1px solid #0d693a;
        border-collapse: collapse;
        text-align: left;
}

td, tr, th {
        padding:1em;
}

th {
        background:#eee;
        font-weight: bold;
}

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

        table, tr, td {
                padding:0;
                border:1px solid #0d693a;
        }

        table {
                border:none;
        }

        thead {
                display:none;
        }

        tr {
                float: left;
                width: 100%;
                margin-bottom: 2em;
        }

        td {
                float: left;
                width: 100%;
                padding:1em;
        }

        td::before {
                content:attr(data-label);
                word-wrap: break-word;
                background: #eee;
                border-right:1px solid #0d693a;
                width: 20%;
                float:left;
                padding:1em;
                font-weight: bold;
                margin:-1em 1em -1em -1em;
        }
}

/* ----------------------------------------------------------------------------------------------------------
01 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}



/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* seaweed-script-regular - latin */
@font-face {
  font-family: 'Seaweed Script';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/seaweed-script-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/seaweed-script-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/seaweed-script-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/seaweed-script-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/seaweed-script-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/seaweed-script-v13-latin-regular.svg#SeaweedScript') format('svg'); /* Legacy iOS */
}

body {
    margin: 0;
    font-size: 100%;
    color: #000;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5em;
}

li { line-height: 1.5em; }
.no li { list-style: none; }
h1{ font-family: 'Open Sans', sans-serif; font-size: 2.0em; text-transform: uppercase; line-height: 1.0em;}
h3 { font-family: 'Montserrat', sans-serif;font-size: 100%;color: #0d693a;margin-bottom: -4px; }

hr {
border: 1px solid #0d693a;
}

a { color: #0d693a; text-decoration: none; font-weight: bold; }
a:active { color: #0d693a; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: gray; text-decoration: none; }

dt > a::after {
        content: ' \25BE';
        text-decoration: none;
}

dt > a:hover {
        text-decoration: none;
}

.ritual { width: 40%; }

/* ----------------------------------------------------------------------------------------------------------
01 Grid Layout - Flex Box ---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen {

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 4em 4em;
  grid-template-areas: "LOGO" "Header";
  padding-bottom: 25px;
}

.LOGO { grid-area: LOGO;text-align: center;background-color:white; }

.flex-container {
        display:flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width:90%;
        margin:auto;
}

.flex-item {
        margin: 10px;
        padding: 20px;
        flex: 1;
        min-width: 30rem;
}
.flex-item-u {
        margin: 10px;
        padding: 20px;
        flex: 1;
        min-width: 20em;
}

.flex-container-index {
        display:flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width:70%;
        margin:auto;
}

.flex-item-index {
        margin: 10px;
        padding: 20px;
        flex: 1;
        min-width: 30rem;
}


.flex-item-crew {
        margin: 10px;
        padding: 20px;
        flex: 1;
}

.flex-container-spenden {
        display:flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width:72%;
        margin:auto;
}

.flex-item-spenden {
        margin: 2px;
        padding: 20px;
        flex: 1;
}

.flex-container-partner {
        display:flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
        width:90%;
        margin:auto;
}

.flex-item-partner {
        padding: 20px;
        flex-grow: 1;
        max-width: 180px !important;
}

.flex-container-footer {
        display:flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
        width:90%;
        margin:auto;
}

.flex-item-footer {
        margin: 10px;
        padding: 20px;
        flex: 1;
}

.body-flex {
       width:100%;
}

#footer {
        width:70%;
        margin:auto;
        border-top: 1px solid #0d693a;
}


#content {
        width:70%;
        margin:auto;
        padding: 20px;
}

.box {
         float: left;
         width: 25%;
}

/* ----------------------------------------------------------------------------------------------------------
06 Style ----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.galerie {padding-left: 2%;}
.thumb {float:left;padding-right:0.1em;}
.elastic-video {
        position: relative;
        padding-bottom: 55%;
        padding-top: 15px;
        height: 0;
        overflow: hidden;
}

.elastic-video iframe {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

/* TICKER */

  @keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }
  .tcontainer {
    width: 100%;
    overflow: hidden;
  }
  .ticker-wrap {
    width: 100%;
    padding-left: 100%;
    background-color: #d8e4df;
  }
  .ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 40s;
  }
  .ticker-move:hover{
    animation-play-state: paused;
  }
  .ticker-item {
    display: inline-block;
    padding: 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
    color: #26684b;
  }

/* TICKER */

/* ----------------------------------------------------------------------------------------------------------
07 Media Queries --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 52.75em) {

}

@media screen and (max-width: 43em) {

}

@media screen and (max-width: 36em) {

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

}