/* desktop first mode */

@media (max-width: 860px) {
    #main-teaser {
        width: 100%;
        height: auto;
        float: none;
        margin-right: 0;
    }
    #main-teaser .slides {
        height: auto;
    }
    #main-teaser .slides li {
        height: auto;
    }
    #main-teaser .slides img {
        width: calc(100% - 2px);
        height: auto;
    }
    #main-teaser .meta h3 {
        font-size: calc(12px + (20 - 12) / (860 - 320) * (100vw - 320px));
    }

    #site-search {
        float: none;
        width: auto;
        margin-bottom: 5px;
    }
    body.subsection-hp #site-search input.text {
        width: calc(100vw - 86px - 8px);
    }
}

@media (max-width: 399px) {
    .small-teaser {
        float: none;
        margin-left: 0;
        margin-bottom: 2em;
        width: 100%;
    }
    .small-teaser img {
        width: calc(100% - 2px);
        height: auto;
    }

    #teaser5 {
        float: none;
        margin-bottom: 2em;
    }

    .small-teaser-right {
        float: none;
        margin-left: 0;
        margin-bottom: 2em;
        width: 100%;
    }
    .small-teaser-right img {
        width: calc(100% - 2px);
        height: auto;
    }

    .very-small-teaser {
        margin-bottom: 10px;
        margin-left: 0;
        width: calc(100% / 2 - 2px);
    }
    .very-small-teaser:nth-child(2n) {
        margin-left: 4px;
    }
    .very-small-teaser:nth-child(2n + 1) {
        clear: both;
    }
    .very-small-teaser img {
        width: calc(100% - 2px);
        height: auto;
    }

    .lastFiveTeaser {
        margin-left: 0;
        margin-bottom: 2em;
    }
    .lastFiveTeaser::after {
        content: "";
        display: block;
        clear: both;
    }
}

@media (min-width: 400px) and (max-width: 860px) {
    .small-teaser {
        float: left;
        margin-left: 0;
        margin-bottom: 2em;
        width: calc(100% / 2 - 2px);
    }
    .small-teaser:nth-child(2n + 1) {
        margin-left: 4px;
    }
    .small-teaser img {
        width: calc(100% - 2px);
        height: auto;
    }

    .very-small-teaser {
        margin-bottom: 10px;
        margin-left: 4px;
        width: calc(100% / 3 - 4px);
    }
    .very-small-teaser:nth-child(3n + 1) {
        clear: both;
    }
    .very-small-teaser:nth-child(3n+1) {
        margin-left: 0;
    }
    .very-small-teaser img {
        width: calc(100% - 2px);
        height: auto;
    }

    .lastFiveTeaser {
        margin-left: 0;
        margin-bottom: 2em;
    }
    .lastFiveTeaser::after {
        content: "";
        display: block;
        clear: both;
    }
}

@media (min-width: 400px) and (max-width: 599px) {
    #teaser5 {
        float: none;
        margin-bottom: 2em;
    }

    .small-teaser-right {
        float: left;
        margin-left: 0;
        margin-bottom: 2em;
        width: 100%;
        width: calc(100% / 2 - 2px);
    }
    .small-teaser-right:nth-child(2n) {
        margin-left: 4px;
    }
    .small-teaser-right img {
        width: calc(100% - 2px);
        height: auto;
    }
}

@media (max-width: 599px) {
    .medium-teaser {
        float: none;
        width: 100%;
        margin-bottom: 2em;
    }
    .medium-teaser img {
        width: calc(100% - 2px);
        height: auto
    }

    .block__side-teaser {
        float: none;
        width: 100%;
        margin-bottom: 2em;
    }
    .block__side-teaser__align_right {
        margin-left: 0;
    }
    .block__side-teaser::after {
        content: "";
        display: block;
        clear: both;
    }
    .side-teaser {
        width: calc(100% / 2 - 4px);
    }
    .side-teaser img {
        width: 100%;
        height: auto;
    }
    .side-teaser:not(:last-child) {
        margin-right: 4px;
        margin-bottom: 0;
    }
}

@media (min-width: 600px) and (max-width: 860px) {
    #teaser2 {
        float: left;
        width: calc(100% / 3 * 2);
        margin-bottom: 2em;
        margin-right: 4px;
    }
    .medium-teaser img {
        width: calc(100% - 2px);
        height: auto
    }

    .block__side-teaser {
        width: calc(100% / 3 - 2px - 4px);
        margin-bottom: 2em;
        margin-left: 0;
    }
    .block__side-teaser__align_right {
        float: right;
        margin-right: 5px;
    }
    .block__side-teaser::after {
        content: "";
        display: block;
        clear: both;
    }
    .side-teaser {
        width: 100%;
    }
    .side-teaser img {
        width: 100%;
        height: auto;
    }

    #teaser5 {
        float: left;
        width: calc(100% / 2 - 2px);
        margin-bottom: 2em;
        margin-right: 0;
    }

    .small-teaser-right {
        float: left;
        margin-left: 0;
        margin-bottom: 2em;
        width: 100%;
        width: calc(100% / 2 - 2px);
    }
    .small-teaser-right:nth-child(2n + 1) {
        margin-left: 4px;
    }
    .small-teaser-right:nth-child(2n) {
        clear: both;
    }
    .small-teaser-right img {
        width: calc(100% - 2px);
        height: auto;
    }

    #teaser613 {
        float: right;
    }
}

@media (max-width: 599px) {
    .latest-headlines .col {
        display: block;
        float: none;
        margin-right: 0;
        width: 100%;
    }
}
@media (min-width: 600px) and (max-width: 860px) {
    .latest-headlines .col {
        display: block;
        float: left;
        margin-right: 0;
        width: calc(100% / 2 - 5px);
    }
    .latest-headlines .col:nth-child(2n) {
        margin-right: 10px;
        clear: both;
    }
}

@media (max-width: 860px) {
    .wrapper .content_left {
        width: calc(100% - 10px);
        float: none;
        clear: both;
        margin: 0 5px;
    }
    #sideteaser {
        width: 100%;
    }
    #sideteaser div.item {
        float: left;
        margin-left: 4px;
        height: 136px;
        background-color: transparent;
    }
    #sideteaser div.item img {
        width: 100%;
        height: auto;
    }

    .main div.left_news {
        width: 100%;
        float: none;
        padding-right: 0;
    }
    .main div.left_news div.teaser img {
        max-width: 100%;
    }

    .block-article {
        width: 100%;
        float: none;
        padding-top: 0;
        padding-right: 0;
    }

    .article div.article_title h3 {
        width: 100%;
    }

    .article_text {
        width: auto;
        overflow: auto;
    }

    .article_top img {
        width: 100%;
        height: auto;
    }
    .article_paragraph_picture img {
        width: 100%;
        height: auto;
    }
    .article_paragraph_picture_big img {
        width: 100%;
        height: auto;
    }
    .article div.article_text div.images_left,
    .article div.article_text div.images_right {
        width: 50%;
        max-width: 200px;
    }

    .article_related {
        width: 100%;
        overflow: auto;
    }
    .article_related iframe {
        width: 100% !important;
        min-width: 100% !important;
    }

    .article_recommend td {
        float: left;
    }

    .main div.right_news {
        width: 100%;
        float: none;
    }

    .main div.right_news div.article_menu {
        width: auto;
    }

    #site-search-little {

        width: 100%;
        float: none;

    }
    #site-search-little input.text {

        padding: 4px 3px;
        width: calc(100% - 103px);

    }

    .main div.right_news div.teaser {
        margin-bottom: 8px;
        margin-left: 4px;
        float: left;
    }
    .main div.right_news div.teaser img {
        width: calc(100% - 2px);
        height: auto;
    }

    .asmbeacon {
        display: none !important;
    }
}

@media (max-width: 399px) {
    .main div.right_news div.teaser {
        width: calc(100% / 2 - 2px);
    }
    .main div.right_news div.teaser:nth-child(2n) {
        margin-left: 0;
        clear: both;
    }
}
@media (min-width: 400px) and (max-width: 699px) {
    .main div.right_news div.teaser {
        width: calc(100% / 3 - 4px);
    }
    .main div.right_news div.teaser:nth-child(3n + 2) {
        margin-left: 0;
        clear: both;
    }
}
@media (min-width: 700px) and (max-width: 860px) {
    .main div.right_news div.teaser {
        width: calc(100% / 4 - 4px);
    }
    .main div.right_news div.teaser:nth-child(4n + 2) {
        margin-left: 0;
        clear: both;
    }
}

@media (max-width: 860px) {
    .main div.archiv {
        width: auto;
    }
    .archiv col {
        width: 100%;
    }
    .archiv td {
        display: block;
        line-height: 2em;
        padding: 1px 0 0 0;
    }
    .archiv__group {
        clear: both;
        margin-right: 2em;
        margin-left: 3em;
        margin-bottom: 0;
    }
    .archiv__letter {
        float: left;
        margin-left: -3em;
    }
    .archiv__entry {
        float: left;
    }
    .archiv__entry::after {
        content: ",";
        margin-right: 1em;
    }
    .archiv__entry:last-child::after {
        content: "";
        margin-right: 0;
        display: block;
        clear: both;
    }

    .main div.teaserarchiv {
        width: auto;
    }
    #form_teaserarchiv_category {
        width: auto !important;
    }
    #form_teaserarchiv_date {
        width: auto !important;
    }

    .main div.left_news div.subsubteaser.subsection_motorsport_rennserien {
        background-position: right 40px;
        padding-left: 0;
    }
    .main div.left_news div.subsubteaser.subsection_motorsport_rennserien div.subsubsection {
        padding-left: 0;
    }
    .main div.left_news div.subsubteaser.subsection_motorsport_rennserien div.teaser {
        padding-left: 0;
    }

    .main div.left_news div.subsubteaser.subsection_rallye_rennserien {
        background-position: right 40px;
        padding-left: 0;
    }
    .main div.left_news div.subsubteaser.subsection_rallye_rennserien div.subsubsection {
        padding-left: 0;
    }
    .main div.left_news div.subsubteaser.subsection_rallye_rennserien div.teaser {
        padding-left: 0;
    }

    .main div.left_news div.fahrer.subsection_motorsport_fahrer {
        padding-left: 0;
        background-position: right 40px;
    }

    .main div.left_news div.fahrer.subsection_rallye_fahrer {
        background-position: right 40px;
        padding-left: 0;
    }
}

    .gallery_picture__image {
        width: 100%;
        height: auto;
    }

@media (max-width: 320px) {
    .gallery_picture_big__logo-motorline {
        background-size: 80px;
        width: 80px;
    }
    .gallery_picture_big__logo-logo1 {
        background-size: 80px !important;
        width: 80px !important;
    }
    .gallery_picture_medium__logo-logo1 {
        background-size: 65px !important;
        width: 65px !important;
    }
}

@media (max-width: 443px) {
    .gallery_picture_medium__outer {
        width: 100% !important;
    }
    .gallery_picture_medium__inner {
        width: 100% !important;
    }
}

@media (min-width: 320px) and (max-width: 443px) {
    .gallery_picture_medium__logo-logo1 {
        background-size: calc(65px + (120 - 70) / (443 - 320) * (100vw - 320px));
        width: calc(65px + (129 - 70) / (443 - 320) * (100vw - 320px)) !important;
    }
}

@media (max-width: 529px) {
    .gallery_picture_left {
        display: none;
    }
    .gallery_picture_right {
        display: none;
    }
}

@media (max-width: 668px) {
    .gallery_picture_big__outer {
        width: 100% !important;
    }

    .gallery_picture_big__inner {
        width: 100% !important;
    }
}

@media (min-width: 320px) and (max-width: 668px) {
    .gallery_picture_big__logo-motorline {
        background-size: calc(80px + (132 - 80) / (668 - 320) * (100vw - 320px));
        width: calc(80px + (132 - 80) / (668 - 320) * (100vw - 320px));
    }
    .gallery_picture_big__logo-logo1 {
        background-size: calc(80px + (132 - 80) / (668 - 320) * (100vw - 320px));
        width: calc(80px + (132 - 80) / (668 - 320) * (100vw - 320px)) !important;
    }
}

@media (max-width: 860px) {
    body.page_gallery .main {
        position: static;
    }

    body.page_gallery .content_left {
        position: static;
        margin-top: 10px;
        width: auto;
        overflow: visible;
        min-width: 320px;
    }
    body.page_gallery #sideteaser {
    }
}

@media (min-width: 321px) and (max-width: 860px) {
    body.page_gallery .content_left {
        position: relative;
        left: 50%;
        top: 0;
        float: left;
        margin-top: 10px;
        width: auto;
        overflow: visible;
        min-width: 320px;
    }
    body.page_gallery #sideteaser {
        position: relative;
        left: -50%;
        float: left;
        overflow: visible;
    }
}
