/********************************
 * Site.css ffzh.ch             *
 * (c) DEIMOS AG                *
 ********************************/
/*
    Formular-Styles in ~/Content/deimos/HomeForm.css
*/


/* Allgemein */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-family: FaktPro, Arial, sans-serif;
    line-height: 16px;
}

img {
    border: 0;
}

a, .link {
    color: #000;
    text-decoration: underline;
}

    a:hover, a:active {
        color: #FF5046;
        text-decoration: none;
    }

address {
    font-style: normal;
}

.visible {
    display: block !important;
}

.highlight {
    background: #FFFF00;
}


/***************************/

.header-title {
    font-family: IndexFF, Georgia, serif;
    font-size: 23px;
    line-height: 40px;
    display: block;
    float: left;
    padding-left: 6px;
}

    .header-title a {
        text-decoration: none;
        color: #000;
    }

.toolbox-bumper {
    width: 100%;
    height: 40px;
    display: block;
}

.title-navi-box {
    width: 100%;
    background: #FFF;
    position: fixed;
    top: 0;
    z-index: 3;
}

@media screen and (min-width: 320px) {
    .title-navi-box {
        height: 40px;
    }
}

.title-navi-box .tools-left {
    display: none;
}

.title-navi-box .tools-right {
    display: none;
}

@media screen and (min-width: 750px) {

    .title-and-burger {
        float: left;
    }

    .title-navi-box .tools-left {
        display: block;
        float: left;
    }

    .title-navi-box .tools-right {
        display: block;
        float: right;
    }

    .title-and-burger .shop-tool,
    .title-and-burger a.tool.donation-tool,
    .title-and-burger .newsletter-tool {
        display: none;
    }
}

div.navi-dropdown {
    display: none;
    padding-top: 40px;
    padding-bottom: 40px;
}

    div.navi-dropdown > ul.navi {
        margin: 0;
        padding: 6px;
    }

ul.navi, ul.navi a, .title-navi-box .search, .title-navi-box .mail {
    color: #FF5046;
}

    ul.navi .no-link {
        color: #000;
    }

    ul.navi li {
        line-height: 20px;
    }

    ul.navi > li {
        display: block;
        float: left;
        width: 100%;
    }

        ul.navi > li > ul {
            padding-left: 0;
        }

    ul.navi, ul.navi ul {
        list-style-type: none;
    }

        ul.navi ul {
            line-height: 16px;
            padding-left: 8px;
        }

        ul.navi a {
            text-decoration: none;
        }

        ul.navi > li > ul > li > ul {
            padding-left: 13px;
        }

div.navi-dropdown .tools-left {
    display: inline-block;
    float: left;
}

div.navi-dropdown .tools-right {
    display: inline-block;
    float: right;
}

ul.navi {
    font-size: 1.1em;
}

@media screen and (min-width: 750px) {

    ul.navi {
        font-size: inherit;
    }

    div.navi-dropdown {
        position: absolute;
        padding-top: 0;
        top: 40px;
        z-index: 1;
        background: #FFF;
    }

        div.navi-dropdown .tools-left {
            display: none;
        }

        div.navi-dropdown .tools-right {
            display: none;
        }
}

.navi-dropdown li.no-link > span.no-link {
    cursor: default;
}
/***************************/

/* Burger-Button */

.kopf-burger.desktop {
    display: none;
}

.kopf-burger.mobile {
    display: block;
}

.kopf-burger {
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    float: right;
    background: url(icons/Balken.svg);
    width: 40px;
    height: 40px;
}

    .kopf-burger:hover,
    .kopf-burger.active {
        background: url(icons/hover/Balken.svg);
    }

@media screen and (min-width: 750px) {

    .kopf-burger.desktop {
        display: block;
    }

    .kopf-burger.mobile {
        display: none;
    }
}

/***************************/
/* Fotogalerie-Modul */

.photogallery-box {
    position: relative;
    overflow: visible;
}

    .photogallery-box .image-box {
        position: relative;
    }

        .photogallery-box .image-box > img {
            width: 100%;
            height: auto;
            display: block;
        }

    .photogallery-box .image-caption {
        background: #FFF;
    }

    .photogallery-box > .title-context {
        background: #FFF;
    }

    .photogallery-box .gallery-pager {
        font-family: FaktPro, Arial, sans-serif;
        font-size: 14px;
        margin-left: 6px;
    }

ul.slick-dots {
    text-align: center;
    list-style-type: none;
}

    ul.slick-dots > li {
        display: inline-block;
        padding: 5px;
    }

        ul.slick-dots > li > button {
            font-size: 0 !important;
            display: inline-block;
            width: 10px;
            height: 10px;
            cursor: pointer;
            background: #000;
            border-radius: 50%;
            border: 0;
            line-height: 0;
            padding: 5px;
        }

        ul.slick-dots > li.slick-active > button {
            background: #FFF;
            border: 1px solid #000;
        }

/**********************************************************************/

.content {
    padding: 0;
    margin: 0 auto;
}


.footer {
    padding: 20px;
    font-size: 10px;
}

.bold {
    font-weight: bold;
}

/**********************************************************************/

/* Isotope */

/* ---- grid ---- */

.grid1 {
    width: 100%;
    float: left;
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item,
.navi-dropdown {
    width: 100%;
    background-color: white;
}

.grid-item {
    float: left;
    padding: 0 0 40px;
}

    .grid-item.image {
        padding: 0;
    }

    .grid-item ul {
        list-style-position: inside;
        list-style: none;
        padding: 0;
    }

    .grid-item li {
        padding: 0 0 5px 0;
    }

        .grid-item li:before {
            content: '— ';
            vertical-align: top;
        }

    .grid-item > .image-box {
        padding: 0;
        position: relative;
        margin: 0;
        display: block;
    }

    .grid-item.event > .image-box,
    .grid-item.person > .image-box {
        margin-top: 0;
    }

    .grid-item > .image-box > img,
    .grid-item > .image-box > a > img {
        width: 100%;
        height: auto;
        display: block;
    }

    .grid-item strong {
        font-size: 22px;
        line-height: 22px;
        font-weight: normal;
        margin-bottom: 1em;
    }

    .grid-item .title-contexts {
        margin: 6px;
    }

        .grid-item .title-contexts > .title-context {
            color: #FF5046;
            font-size: 14px;
            line-height: 16px;
        }

            .grid-item .title-contexts > .title-context > a {
                color: #FF5046;
                text-decoration: none;
                display: block;
            }

    .grid-item > .title-subtitle {
        margin: 0 6px 6px;
    }

        .grid-item > .title-subtitle > .title {
            font-family: IndexFF, Georgia, serif;
            font-size: 23px;
            line-height: 23px;
        }

        .grid-item > .title-subtitle > .subtitle {
            font-size: 22px;
            line-height: 22px;
        }

.shopping-cart .grid-item .title-contexts {
    margin: 6px 15px;
}

.shopping-cart .grid-item > .title-subtitle,
.aufnahmeverfahren-form .grid-item > .title-subtitle,
.donation-form .grid-item > .title-subtitle {
    margin: 0 15px 6px;
}

.grid-item > .text,
.grid-item > .file {
    margin: 6px 6px;
    font-size: 14px;
    line-height: 16px;
}

    .grid-item > .file img {
        margin: -10px;
    }


.aufnahmeverfahren-form .grid-item > .text,
.shopping-cart .grid-item > .text,
.donation-form .grid-item > .text {
    margin: 6px 15px;
}

.grid-item > .social-media-buttons {
    margin: 0 6px;
}

.grid-item > .vimeo-video {
    width: 100%;
    height: 0;
    margin-top: 24px;
    padding-top: 56.25%;
    position: relative;
}

    .grid-item > .vimeo-video > div {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
    }

        .grid-item > .vimeo-video > div > iframe {
            width: 100%;
            height: 100%;
        }

.aufnahmeverfahren-form .grid-item > ul.form,
.shopping-cart .grid-item > ul.form,
.donation-form .grid-item > ul.form {
    padding: 6px 15px;
}

@media screen and (min-width: 500px) {

    .aufnahmeverfahren-form .grid-item > ul.form,
    .shopping-cart .grid-item > ul.form,
    .donation-form .grid-item > ul.form {
        padding: 6px 65px 6px 15px;
    }
}

.grid-item .social-media-buttons a {
    text-decoration: none;
}

    .grid-item .social-media-buttons a > img {
        display: inline-block;
        width: 40px;
        height: 40px;
    }

.grid-item a.homepage,
.grid-item a.email {
    display: block;
}

.grid-item.search {
    height: 150px;
}

.grid-item--width2 {
    width: 100%;
}

/*
    Relative Spaltenbreiten abhängig von Breite.
    Es wird immer die Breite füllend aufgeteilt, und bei zunehmender Breite werden Spalten hinzugefügt.
    50
    33.333
    20
    16.666
    14.285
    12.5
    11.111
    10
    9.091
    8.333
*/

@media screen and (min-width: 500px) {

    .grid-sizer,
    .grid-item {
        width: 50%;
    }

    .form-box {
        width: 100%;
    }
}

@media screen and (min-width: 750px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 33.333%;
    }

    .grid-item--width2 {
        width: 66.666%;
    }
}

@media screen and (min-width: 1000px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 25%;
    }

    .grid-item--width2 {
        width: 50%;
    }
}

@media screen and (min-width: 1250px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 20%;
    }

    .grid-item--width2 {
        width: 40%;
    }
}

@media screen and (min-width: 1500px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 16.666%;
    }

    .grid-item--width2 {
        width: 33.333%;
    }
}

@media screen and (min-width: 1750px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 14.285%;
    }

    .grid-item--width2 {
        width: 28.571%;
    }
}

@media screen and (min-width: 2000px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 12.5%;
    }

    .grid-item--width2 {
        width: 25%;
    }
}

@media screen and (min-width: 2250px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 11.111%;
    }

    .grid-item--width2 {
        width: 22.222%;
    }
}

@media screen and (min-width: 2500px) {


    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 10%;
    }

    .grid-item--width2 {
        width: 20%;
    }
}

@media screen and (min-width: 2750px) {


    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 9.091%;
    }

    .grid-item--width2 {
        width: 18.192%;
    }
}

@media screen and (min-width: 3000px) {

    .grid-sizer,
    .grid-item,
    .navi-dropdown,
    .title-and-burger {
        width: 8.333%;
    }

    .grid-item--width2 {
        width: 16.666%;
    }
}


/**********************************************************************/

/* Warenkorb */

.shopping-cart #open-payment-window {
    position: relative;
    padding: 0;
    height: 36px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 100%;
    text-align: left;
}

    .shopping-cart #open-payment-window:before {
        content: "";
        height: 30px;
        width: 50px;
        display: inline-block;
        vertical-align: middle;
        background-image: url("icons/Icon_Pfeil_rechts.svg");
        background-repeat: no-repeat;
        background-position: -15px center;
        background-size: 100%;
    }

.form-box .solid-bottom {
    border-bottom: 1px solid #ffffff;
}

.shopping-cart .form-box .solid-bottom {
    border-bottom-color: #000;
}

.form-box .solid-top {
    border-top: 1px solid #FFF;
}

.shopping-cart .form-box .solid-top {
    border-bottom-color: #000;
}

.shopping-cart .right-arrow {
    background-image: url("icons/Icon_Pfeil_rechts.svg");
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: -15px center;
    height: 22px;
    width: 30px;
    float: left;
}

@media screen and (min-width: 500px) {

    .shopping-cart .right-arrow {
        width: 50px;
    }
}

.shopping-cart th {
    font-weight: normal;
}

.shopping-cart .subtitle {
    border-bottom: 1px solid black;
}

.shopping-cart .text.margin-left-right,
.shopping-cart .form.margin-left-right {
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and (min-width: 500px) {
    .shopping-cart .subtitle {
        margin-left: 50px;
        margin-right: 50px;
    }

    .shopping-cart .text.margin-left-right,
    .shopping-cart .form.margin-left-right {
        margin-left: 65px;
        margin-right: 65px;
    }
}

.shopping-cart td.distance-cell {
    width: 50px;
}

.shopping-cart .close {
    float: right;
    padding: 5px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    display: none;
}

.grid-item .text.kurs td {
    line-height: 25px;
    height: 25px;
}

.grid-item .text.kurs .shopping-cart-remove {
    background-image: url("icons/Schliessen.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    height: 20px;
    width: 50px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.shopping-cart .ersatzkurs {
    margin-bottom: 10px;
}

    .shopping-cart .ersatzkurs label {
        width: 60px;
    }

    .shopping-cart .ersatzkurs input {
        background: #99FF99;
        border: none;
        width: calc(100% - 60px);
    }

/**********************************************************************/

/* AufnahmeverfahrenBox */

.aufnahmeverfahren-form #open-payment-window {
    position: relative;
    padding: 0;
    height: 36px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 100%;
    text-align: left;
}

    .aufnahmeverfahren-form #open-payment-window:before {
        content: "";
        height: 30px;
        width: 50px;
        display: inline-block;
        vertical-align: middle;
        background-image: url("icons/Icon_Pfeil_rechts.svg");
        background-repeat: no-repeat;
        background-position: -15px center;
        background-size: 100%;
    }

.aufnahmeverfahren-form .form-box .solid-bottom {
    border-bottom-color: #000;
}

.aufnahmeverfahren-form .form-box .solid-top {
    border-bottom-color: #000;
}

.aufnahmeverfahren-form .right-arrow {
    background-image: url("icons/Icon_Pfeil_rechts.svg");
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: -15px center;
    height: 22px;
    width: 30px;
    float: left;
}

@media screen and (min-width: 500px) {

    .aufnahmeverfahren-form .right-arrow {
        width: 50px;
    }
}

.aufnahmeverfahren-form th {
    font-weight: normal;
}

.aufnahmeverfahren-form .subtitle {
    border-bottom: 1px solid black;
}

.aufnahmeverfahren-form .text.margin-left-right,
.aufnahmeverfahren-form .form.margin-left-right {
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and (min-width: 500px) {
    .aufnahmeverfahren-form .subtitle {
        margin-left: 50px;
        margin-right: 50px;
    }

    .aufnahmeverfahren-form .text.margin-left-right,
    .aufnahmeverfahren-form .form.margin-left-right {
        margin-left: 65px;
        margin-right: 65px;
    }
}

.aufnahmeverfahren-form td.distance-cell {
    width: 50px;
}

.aufnahmeverfahren-form .close {
    cursor: pointer;
    height: 40px;
    width: 40px;
    background-image: url("icons/Schliessen.svg");
    background-size: 100%;
    background-position: center;
    float: right;
}

/**********************************************************************/

/* Kurs */

.text.kurs th.left,
.text.kurs .dates,
.text.kurs td.total {
    padding-left: 30px;
}

@media screen and (min-width: 500px) {

    .text.kurs th.left,
    .text.kurs .dates,
    .text.kurs td.total {
        padding-left: 50px;
    }
}

.kurs .kurs-title {
    padding-left: 30px;
}

@media screen and (min-width: 500px) {
    .kurs .kurs-title {
        padding-left: 50px;
    }
}

/**********************************************************************/

/* Infomaterial */


.infomaterial-row {
    display: block;
    border-bottom: 1px solid #000;
}

    .infomaterial-row.head {
        display: none;
    }

.infomaterial-cell {
    display: block;
    line-height: 25px;
}

    .infomaterial-cell .description {
        line-height: 16px;
    }

    .infomaterial-cell.download {
        padding-right: 10px;
    }

        .infomaterial-cell.download > label:after {
            content: "Download";
        }

    .infomaterial-cell.delivery > label:after {
        content: "Postversand";
    }

@media screen and (min-width: 500px) {

    .infomaterial-table {
        display: table;
    }

    .infomaterial-head {
        display: table-cell;
        padding: 5px;
    }

        .infomaterial-head.left {
            padding-left: 50px;
        }

    .infomaterial-row,
    .infomaterial-row.head {
        display: table-row;
        border-bottom: none;
    }

    .infomaterial-cell {
        padding: 5px;
        display: table-cell;
        border-bottom: 1px solid #000;
    }

        .infomaterial-cell.download > label:after {
            display: none;
        }

        .infomaterial-cell.delivery > label:after {
            display: none;
        }
}

.infomaterial-cell .infomaterial-title,
.infomaterial-cell .description {
    padding-left: 30px;
}


.infomaterial-cell.download,
.infomaterial-cell.delivery {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
}

@media screen and (min-width: 500px) {

    .grid-item > .text.margin-right {
        margin-right: 65px;
    }

    .infomaterial-cell.download,
    .infomaterial-cell.delivery {
        text-align: center;
    }

    .infomaterial-cell .infomaterial-title,
    .infomaterial-cell .description {
        padding-left: 50px;
    }
}

/**********************************************************************/

/* Zahlung */

.grid-item > .text.postfinance-message {
    background: #FFFFFF;
    line-height: 2em;
    color: #000;
    text-align: center;
}

    .grid-item > .text.postfinance-message.refreshing:before {
        content: "";
        height: 16px;
        width: 16px;
        background-image: url(../pics/ajax-loader.gif);
        display: inline-block;
        padding-right: 20px;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
    }


/**********************************************************************/

/* Bestätigung */

.confirmation-message {
    background-image: url("icons/Herzdurchschuss_gross.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 600px;
    height: 200px;
    text-align: center;
    position: relative;
}

/**********************************************************************/

/* Kurs-Box */

.grid-item.kurs table.angebotsdaten td.day-of-week-cell {
    font-size: 14px;
}

.grid-item.kurs table.angebotsdaten td.date-cell {
    padding-left: 10px;
    font-size: 14px;
}

.grid-item.kurs table.angebotsdaten td.time-cell {
    padding-left: 10px;
    font-size: 14px;
    width: 1000px;
}

.kurs .kurs-anmeldung-fakten.text {
        margin: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .kurs.kurs-anmeldbar .kurs-anmeldung-fakten:hover {
        background: #00ff00;
    }

    .kurs .kurs-anmeldung-fakten ul {
        margin: 0;
    }

    .kurs .kurs-anmeldung-fakten li {
        line-height: 20px;
        padding: 0;
    }

        .kurs .kurs-anmeldung-fakten li::before {
            content: "";
            background: url("icons/Icon_Pfeil_rechts.svg");
            background-repeat: no-repeat;
            background-size: 40px;
            background-position: center;
            width: 20px;
            display: block;
            float: left;
            height: 20px;
            margin-right: 5px;
        }

    .kurs.kurs-in-cart .kurs-anmeldung-fakten {
        background: #00ff00;
    }

    .kurs a.kurs-anmeldung .kurs-anmeldung-label-when-not-in-cart {
        display: inline;
    }

    .kurs a.kurs-anmeldung .kurs-anmeldung-label-when-in-cart {
        display: none;
    }

    .kurs-in-cart a.kurs-anmeldung .kurs-anmeldung-label-when-not-in-cart {
        display: none;
    }

    .kurs-in-cart a.kurs-anmeldung .kurs-anmeldung-label-when-in-cart {
        display: inline;
    }
    /**********************************************************************/

    /* Aufnahmeverfahren Box */

    .aufnahmeverfahren-anmeldung-fakten:hover,
    .aufnahmeverfahren-anmeldung-all-fakten ul:hover {
        background: #00ff00;
    }

    .aufnahmeverfahren-anmeldung-all-fakten li {
        padding: 5px 0;
    }

    /* Damit der blaue Hover bis an den Rand reicht. */
    .grid-item > .aufnahmeverfahren-anmeldung-fakten {
        margin-left: 0;
        margin-right: 0;
        padding-right: 6px;
        padding-left: 6px;
    }

    .aufnahmeverfahren-infos {
        display: inline-block;
        width: calc(100% - 20px);
    }
    /**********************************************************************/
    @media screen and (min-width: 750px) {
        .grayscale {
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            -o-filter: grayscale(1);
            filter: grayscale(1);
        }

        .grid-item:hover img.grayscale {
            -webkit-filter: none;
            -moz-filter: none;
            -o-filter: none;
            filter: none;
        }
    }

    /**********************************************************************/

    /* Scroll-Top-Button */

    #scroll-top {
        z-index: 99;
        position: fixed;
        bottom: 30px;
        right: 20px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: none;
    }

    .scroll-top-arrow {
        width: 40px;
        height: 40px;
        background-image: url(icons/Icon_Pfeil_gross.png);
        background-repeat: no-repeat;
    }

    /**********************************************************************/

    /* Tool-Buttons */

    a.tool {
        height: 30px;
        display: block;
        color: black;
        text-decoration: none;
    }

        a.tool.right-tool {
            margin-left: 5px;
        }

        a.tool.left-tool {
            margin-right: 5px;
        }

        a.tool.search-tool {
            background: url(icons/Suche.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.search-tool:hover {
                background: url(icons/hover/Suche.svg);
            }

        a.tool.mail-tool {
            background: url(icons/Mail.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.mail-tool:hover {
                background: url(icons/hover/Mail.svg);
            }

        a.tool.newsletter-tool {
            background: url(icons/Newsletter.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.newsletter-tool:hover {
                background: url(icons/hover/Newsletter.svg);
            }


        a.tool.facebook-tool {
            background: url(icons/Facebook.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.facebook-tool:hover {
                background: url(icons/hover/Facebook.svg);
            }


        a.tool.donation-tool {
            background: url(icons/Spenden.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.donation-tool:hover {
                background: url(icons/hover/Spenden.svg);
            }

        a.tool.twitter-tool {
            background: url(icons/Twitter.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.twitter-tool:hover {
                background: url(icons/hover/Twitter.svg);
            }

        a.tool.instagram-tool {
            background: url(icons/Instagramm.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.instagram-tool:hover {
                background: url(icons/hover/Instagramm.svg);
            }

        a.tool.youtube-tool {
            background: url(icons/Youtube.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.youtube-tool:hover {
                background: url(icons/hover/Youtube.svg);
            }

        a.tool.vimeo-tool {
            background: url(icons/Vimeo.svg);
            height: 40px;
            width: 40px;
        }

            a.tool.vimeo-tool:hover {
                background: url(icons/hover/Vimeo.svg);
            }

        a.tool.download-tool {
            background: url(icons/Downloade.svg);
            height: 40px;
            width: 40px;
        }

    .file .tool.download-tool {
        background: url(icons/Downloade.svg);
        display: inline-block;
        height: 20px;
        width: 20px;
        background-position: center;
    }

    a.tool.download-tool:hover,
    .file a:hover .tool.download-tool {
        background: url(icons/hover/Downloade.svg);
        background-position: center;
    }

    .flyout-link .tool.open-newsletter-tool {
        background: url(icons/Newsletter.svg);
        display: inline-block;
        height: 20px;
        width: 20px;
        background-position: center;
    }

    .flyout-link a:hover .tool.open-newsletter-tool {
        background: url(icons/hover/Newsletter.svg);
        background-position: center;
    }

    /***********************/

    a.tool.shop-tool {
        background-image: url(icons/Shop.svg);
        height: 40px;
        width: 40px;
        position: relative;
        -webkit-transition: background-color 800ms linear;
        -ms-transition: background-color 800ms linear;
        transition: background-color 800ms linear;
    }

        a.tool.shop-tool:before {
            content: "+";
            position: absolute;
            top: 2px;
            left: 10px;
            opacity: 0;
            -webkit-transition: opacity 800ms linear;
            -ms-transition: opacity 800ms linear;
            transition: opacity 800ms linear;
        }

        a.tool.shop-tool:hover {
            background-image: url(icons/hover/Shop.svg);
        }

        a.tool.shop-tool.has-items:hover {
            background-image: url(icons/Shop.svg);
        }

        a.tool.shop-tool.has-items {
            background-color: #00FF00;
            -webkit-transition: background-color 800ms linear;
            -ms-transition: background-color 800ms linear;
            transition: background-color 800ms linear;
        }

            a.tool.shop-tool.has-items:before {
                opacity: 1;
            }

    /***********************/

    /* Abschnitt Tools */

    a.tool.twitter-share {
        background-image: url(icons/Twitter_share.svg);
        background-position: center 50px;
    }

        a.tool.twitter-share:hover {
            background-image: url(icons/hover/Twitter_share.svg);
        }

    a.tool.facebook-like {
        background-image: url(icons/Facebook_liken.svg);
        background-position: center 50px;
    }

        a.tool.facebook-like:hover {
            background-image: url(icons/hover/Facebook_liken.svg);
        }

    a.tool.mail-share {
        background-image: url(icons/Mail_share.svg);
        background-position: center 45px;
    }

        a.tool.mail-share:hover {
            background-image: url(icons/hover/Mail_share.svg);
        }

    a.tool.whatsapp-share {
        background-image: url(icons/Whatsapp_share.svg);
        background-size: 197% !important;
        background-repeat: no-repeat;
        background-position: center 10px;
    }

        a.tool.whatsapp-share:hover {
            background-image: url(icons/hover/Whatsapp_share.svg);
        }

    .whatsapp-share {
        display: none; /* activated via js when mobile detected*/
    }

    .social-media-buttons a.tool {
        height: 40px;
        width: 17px;
        margin-right: 10px;
        float: left;
        background-size: 230%;
    }
    /*================*/


    a.tool.dummy-tool {
        width: 30px;
        border: 2px solid black;
        font-size: 1.5em;
        border-radius: 50%;
        text-align: center;
    }

        a.tool.dummy-tool:hover {
            color: #FF5046;
        }


    .search-box {
        float: right;
        white-space: nowrap;
        height: 40px;
    }

    .title-and-burger:after {
        content: "";
        display: table;
        clear: both;
    }

    .navi-dropdown .newsletter-tool,
    .navi-dropdown .search-tool,
    .navi-dropdown .shop-tool,
    .navi-dropdown .donation-tool,
    .navi-dropdown input[name='Keyword'] {
        display: none !important;
    }

    .tools-left input[name='Keyword'],
    .title-and-burger input[name='Keyword'] {
        display: block;
    }
    /* 
  Ist absichtlich getrennt. 
  Die erste Regel definiert display: block; als Standard. 
  Das ist notwendig für den späteren jQuery toggle().
*/
    .tools-left input[name='Keyword'],
    .title-and-burger input[name='Keyword'] {
        display: none;
        height: 30px;
        margin: 5px;
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid #000;
        outline: none;
        font-size: 14px;
        font-family: FaktPro, Arial, sans-serif;
    }

    .tools-left input[name='Keyword'] {
        float: left;
    }

    .title-and-burger input[name='Keyword'] {
        float: right;
        width: 80px;
    }

    @media screen and (min-width: 400px) {
        .title-and-burger input[name='Keyword'] {
            width: auto;
        }
    }

    @media screen and (min-width: 750px) {
        .title-and-burger .search-box {
            display: none;
        }
    }

    @media screen and (min-width: 320px) {
        a .dummy-tool {
            margin-right: 20px;
        }
    }
    /* Aufnahmeverfahren Box */

    /**********************************************************************/

    /* Style der Bildlegende */

    .grid-item .image-caption {
        font-family: FaktPro, Arial, sans-serif;
        font-size: 10px;
        line-height: 15px;
        padding: 5px 6px 0;
    }

    .photogallery-box .image-box > .gallery-info {
        background: #FFFFFF;
        height: 24px;
        font-family: FaktPro, Arial, sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 6px 6px;
    }


    /**********************************************************************/

    /* Misc */

    .external-content {
        width: 100%;
        height: 0;
        padding-top: 56.25%;
        position: relative;
    }

        .external-content > div {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
        }

            .external-content > div > iframe,
            .external-content > div > div {
                height: 100% !important;
                width: 100% !important;
            }

    @media screen and (min-width: 750px) {
        .external-content {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }

            .external-content:hover {
                -webkit-filter: none;
                filter: none;
            }
    }

    /*
.hyphenate {
    -webkit-font-variant-ligatures: no-common-ligatures;
    font-variant-ligatures: no-common-ligatures;
}
    */
    .hyphenate {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .more-items-button {
        background-image: url("../pics/ajax-loader.gif");
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        height: 100px;
        padding: 10px;
    }

    /* ReSharper disable DeclarationIsEmpty */
    .close-confirmation {
    }

    .dynamic-box {
    }
    /* ReSharper restore DeclarationIsEmpty */