@media screen {

/* 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 */
}

.logo01 {
                        float:left;
                        width:90%;
                        }
.social {
                        display: inline-block;
                        margin-bottom: 0.9em;
                        }


.dices{
        background-image: url(../sterbebegleitung/header/Hospiz-Team-Nuernberg-Farbwuerfel.png);
        background-repeat: repeat-x;
        height: 27px;
        position:absolute;
        bottom: 0;
        width: 100%;
}

.teaser{
        color: white;
        font-size: calc(20px + (52 - 20) * ((100vw - 320px) / (1750 - 320)));
        text-shadow: black 0.1em 0.1em 0.2em;
        /*font-weight: bold;*/
        line-height: 2.5em;
        padding-top: 1.5em;
        padding-left: 4em;
}

.HeaderHome {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/index/Hospiz-Team-Nuernberg-Regenschirme.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderKinder {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-kinderhospizarbeit.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderTeam {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/index/Hospiz-Team-Nuernberg-Regenschirme.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderBegleitung {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-begleitung.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderGalerie {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-galerie.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderTreffen {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-treffen.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderVeranstaltungen {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-veranstaltungen.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderPresse {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-presse.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderPC {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-palliativecare.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderTrauer {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-trauer.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderTB {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/tulpe.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderSAPV {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/Graeser.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderZIB {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/mohn.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderBeHi {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-behinderung.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderObdach {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-obdachlos.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderOHR {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-gebaerde.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}
.HeaderOHR-2 {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-gebaerde-2.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderVerein {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-verein.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderUnterstuetzer {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-unterstuetzer.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderSpenden {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-spenden.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderMitarbeit {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-mitarbeit.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderKooperation {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-kooperation.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderKontakt {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-kontakt.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderBildung {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-bildung.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderArbeitsgruppen {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-arbeitsgruppen.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}

.HeaderArbeitsfelder {
grid-area: Header;
position:relative;
height: 45em;
background-color:white;
background-image: url(../sterbebegleitung/header/header-arbeitsfelder.jpg);
background-size: cover;
background-position:0px 2em;
background-repeat: no-repeat;
margin-top: -3.5%;
}



/* NAVIGATION */

nav a {
        color: #26684b;
}

.toggle,
[id^=drop] {
        display: none;
}

nav {
        background-color: #b3cac0;
        min-width: 320px;
        max-width: 1750px;
        font-size: calc(9px + (18 - 9) * ((100vw - 320px) / (1750 - 320)));
        /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
        line-height: 16px;
        margin: auto;
        word-break: keep-all;
        text-wrap: none;
}

.FirstLev{
        background-color: #e4ede9;
}
.SecondLev{
        background-color: #e4ede9;
        padding-left:45px;
}
.SecondLevBegl {
        background-color: #ecf2ef;
        width: 25em;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
        content:"";
        display:table;
        clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
        float: left;
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
        }

/* Positioning the navigation items inline */
nav ul li {
        margin: 0px;
        display:inline-block;
        float: left;
        background-color: #b3cac0;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300 !important;
        }

.nav-last {
        display: block;
        background-color: #b3cac0;
        color: #26684b;
        font-size: calc(9px + (18 - 9) * ((100vw - 320px) / (1750 - 320)));
        text-decoration: none;
        border: none;
        }

/* Styling the links */
nav a {
        display:block;
        padding:14px 20px;
        color:#26684b;
        text-decoration:none;
}


nav ul li ul li:hover { color: #fff !important; background: #e4ede9; }

/* Background color change on Hover */
nav a:hover {
        background-color: #26684b;
        color: #fff;
        text-decoration: none;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
        display: none;
        position: absolute;
        /* has to be the same number as the "line-height" of "nav a" */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
        display:inherit;
}

/* First Tier Dropdown */
nav ul ul li {
        width:390px;
        float:none;
        display:list-item;
        position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
        position: relative;
        top:-57px;
        /* has to be the same number as the "width" of "nav ul ul li" */
        left:390px;
}


/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' \25BE'; }
li > a:only-child:after { content: ''; }


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

@media all and (max-width : 768px) {

        nav {
                margin: 0;
        }

        /* Hide the navigation menu by default */
        /* Also hide the  */
        .toggle + a,
        .menu {
                display: none;
        }

        /* Styling the toggle lable */
        .toggle {
                display: block;
                background-color: #b3cac0;
                padding:14px 20px;
                color:#26684b;
                font-size:17px;
                text-decoration:none;
                border:none;
        }

        .nav-last {
                 font-size: 17px;
                 color:#26684b;
        }

        .toggle:hover {
                background-color: #26684b;
                color:#fff;
        }

        /* Display Dropdown when clicked on Parent Lable */
        [id^=drop]:checked + ul {
                display: block;
        }

        /* Change menu item's width to 100% */
        nav ul li {
                display: block;
                width: 100%;
                }

        nav ul ul .toggle,
        nav ul ul a {
                padding: 0 40px;
        }

        nav ul ul ul a {
                padding: 0 80px;
        }

        nav a:hover,
         nav ul ul ul a {
                background-color: #e4ede9;
        }

        nav ul li ul li .toggle,
        nav ul ul a,
        nav ul ul ul a{
                padding:14px 45px;
                color:#26684b;
                font-size:17px;
        }


        nav ul li ul li .toggle,
        nav ul ul a {
                background-color: #e4ede9;
        }

        /* Hide Dropdowns by Default */
        nav ul ul {
                float: none;
                position:static;
                color: #ffffff;
                /* has to be the same number as the "line-height" of "nav a" */
        }

        /* Hide menus on hover */
        nav ul ul li:hover > ul,
        nav ul li:hover > ul {
                display: none;
        }

        /* Fisrt Tier Dropdown */
        nav ul ul li {
                display: block;
                width: 100%;
        }

        nav ul ul ul li {
                position: static;
                /* has to be the same number as the "width" of "nav ul ul li" */

        }

        .teaser{
        padding-top: 2.5em;
        padding-left: 1em;
                  }

                  .flex-item {
              min-width: 20rem !important;
                  }

                  .logo {
                        width: 80%;
                        margin-bottom: -3em;
                        }

}

@media all and (max-width : 330px) {

        nav ul li {
                display:block;
                width: 94%;
        }

}


}
/* Examples for 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) {

}