/* place your custom css here */
html, body {
    min-height: 100% !important;
    min-width: 100% !important;
}

body {
    background-image: url(../uploads/background-80.jpg);
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 0;
}

@media screen and (orientation: landscape) {
    body[data-slug="endlichkeitderfreiheit"] {
        background: #b1364a !important;
    }
    body[data-slug="endlichkeitderfreiheit"]::before {
        content: ' ';
        display: block;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -10;
        background-repeat: no-repeat;
        background-image: url(../uploads/edf_17012020_rot_sd.jpg);
        background-size: cover;
        /*background-attachment: fixed;*/
        background-position: top center;
        background-color: #b1364a !important;
        transition: all 0.5s ease-in-out;
    }
}

.page {
    background-color: transparent !important;
}

.box {
    margin-right: 4px !important;
    margin-bottom: 2.5em !important;
}

article.box.is_link .article_link_overlay {
    background-color: transparent;
    border-color: transparent;
}

article.box.is_link:hover .article_link_overlay {
    opacity: 0;
}

article .article_images img {
    height: auto;
    object-fit: contain;
}

/* Hover only on devices with true hover state */
    @media screen and (hover: hover ) and (pointer:fine) {
        article.box.is_link .article_link_overlay {
            background-color: #00f !important;
            border-color: #00f !important;
        }

        article.box.is_link:hover .article_link_overlay {
            opacity: 0.5 !important;
        }
    }


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

    body {
        background-repeat: repeat;
        background-image: url(../uploads/background-640.jpg);
    }

    #header_inner, #page_inner, #footer_inner, .page {
        float: none !important;
    }

    #header, #page, #footer {
        padding: 20px !important;
    }

    .box {
        position: relative !important;
        top: unset !important;
        right: unset !important;
        bottom: unset !important;
        left: unset !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-width: 100% !important;
    }

    .box .inner {
        padding-top: 10px 20px 35px 15px !important;
    }

    .box .article_header,
    #header_inner .article_content  {
        width: 100% !important;
        font-size: 22px !important;
    }
}

@media screen and (orientation: portrait) {
    body[data-slug="endlichkeitderfreiheit"] {
        background: #f2df1f !important;
    }
    body[data-slug="endlichkeitderfreiheit"]::before {
        content: ' ';
        display: block;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -10;
        background-repeat: no-repeat;
        background-image: url(../uploads/edf_17012020_gelb_sd.jpg);
        background-size: cover;
        /*background-attachment: fixed;*/
        background-position: top center;
        background-color: #f2df1f !important;
        transition: all 0.5s ease-in-out;
    }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
    .box .article_header,
    #header_inner .article_content  {
        width: 100% !important;
        font-size: 24px !important;
    }

    .box {
        width: auto !important;
    }
}

@media screen and (min-width: 641px) and (max-width: 1180px) {

    #header_inner, #page_inner, #footer_inner, .page {
        float: none !important;
    }

    #header, #page, #footer {
        padding: 20px !important;
    }

    .box {
        position: relative !important;
        top: unset !important;
        right: unset !important;
        bottom: unset !important;
        left: unset !important;
        height: auto !important;
        min-height: auto !important;
        max-width: 100% !important;
        margin-right: 30px !important;
        margin-bottom: 30px !important;
    }

    .box .inner {
        padding: 10px 35px 35px 15px !important;
    }

    .box .article_header,
    #header_inner .article_content  {
        width: 100% !important;
    }
}