/**
 * Media Queries
 */

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

    html
    {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1601px)
{
    #start.content-wrapper .grid-wrapper
    {
        max-width: 1500px;
    }

}

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

    #menu.open ~ #page-wrapper .content-wrapper > .body
    {
        /*max-width:calc(100% - 200px);
        margin:auto;*/
    }


    #start.content-wrapper .grid-wrapper
    {
        max-width: auto;
    }

}

@media only screen and (max-width: 1280px)
{
    body
    {
        font-size: 14px;
    }

    .page-content .content-wrapper
    {
        max-width: 94%;
        margin: auto;
    }

    #menu.open ~ #page-wrapper #start.content-wrapper .img.frame
    {
        max-width: 400px;
    }

}


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

    .h1.top
    {
        font-size: 1.75em;
    }

    .content-wrapper > .grid-wrapper,
    .content-wrapper > .body
    {
        max-width: 86%;
        margin-left: auto;
        margin-right: auto;
    }

}

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

    .h0
    {
        font-size: 0.8em;
        color: #ddd;
    }

    .h1.top
    {
        font-size: 1.85em;
    }

    #menu.open ~ #page-wrapper
    {
        /*max-width: 100%;
        overflow: auto;
        margin-left: 0;*/
    }

    #menu ~ #page-wrapper > .page-content
    {
        /*margin-left:225px;
        width: 100%;*/
    }

    #menu.closed ~ #page-wrapper > .page-content
    {
        margin-left: 0;
        max-width: 100%;
    }

    #footer .content-wrapper.contact-box .headline
    {
        float: none;
        margin: 20px;
        font-size: 1em;
    }

    #home
    {
        max-width: 70%;
    }

    .content-wrapper
    {
        padding: 0 0 50px;
    }
}

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

    .h1.top
    {
        font-size: 1.65em;
        line-height: 1.1em;
        padding: 0px;
        margin: 0.5em auto 1.5em auto !important;
    }

    #start .h1
    {
        margin: 0;
        padding: 0;
        word-break: initial;
        font-size: 2.5em;
    }


    body
    {
        font-size: 14px;
        color: #fff;
    }

    .content-wrapper .info-slider .body
    {
        padding: 20px;
        position: relative;
        left: inherit;
        top: inherit;
        right: inherit;
        max-width: 100%;
        max-height: 400px;
        margin: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .content-wrapper .info-slider .body-r .body
    {
        right: 0px;
    }

    .h1,
    .h2,
    .h3
    {

        word-break: break-word;
    }

    .h2
    {
        font-size: 1.1em;
        font-weight: bold;
    }

    .f-magneto
    {
        font-size: 1.8em;
    }

    .header-right .headline
    {
        text-align: left;
    }

    .h1
    {
        font-size: 2em;
        padding: 0;
        margin-bottom: 30px !important;
        margin-top: 20px !important;
    }

    .content-wrapper .head .h1,
    .content-wrapper .head .h2
    {
        padding: 15px;
    }

    .content-wrapper .head .h1
    {
        font-size: 2em;
        padding: 15px;
        margin-top: 200px;
        line-height: 1.0em;
    }

    #start.content-wrapper.bg
    {
        /*background-image: url("/file/img/layout/bg01.jpg");
        background-position: 25% 0;
        background-repeat: no-repeat;
        background-size: auto;*/
    }

    .page-content .content-wrapper
    {
        padding: 0 0 25px;
    }

    .page-content .content-wrapper.ads
    {
        padding: 0;
    }

    .content-wrapper.bg:after
    {
        height: 25px;
    }

    .content-wrapper .grid-wrapper
    {
        /*max-width:92%;	*/
    }

    .timeline .item .desc
    {
        max-width: 100%;
    }

    .timeline .item .content,
    .timeline .item:nth-child(2n+2) .content
    {
        max-width: 100%;
        width: auto;
        text-align: left;
        margin-left: 25px;
    }

    .timeline .item:last-child:before, .timeline .item .dot, .timeline::before
    {
        left: 10px;
    }
}

@media (max-width: 479px)
{

    .swap-slider > .radio-1:checked ~ .nav > .btn.button-1, .swap-slider > .radio-2:checked ~ .nav > .btn.button-2, .swap-slider > .radio-3:checked ~ .nav > .btn.button-3, .swap-slider > .radio-4:checked ~ .nav > .btn.button-4, .swap-slider > .radio-5:checked ~ .nav > .btn.button-5, .swap-slider > .radio-6:checked ~ .nav > .btn.button-6, .swap-slider > .radio-7:checked ~ .nav > .btn.button-7, .swap-slider > .radio-8:checked ~ .nav > .btn.button-8, .swap-slider > .radio-9:checked ~ .nav > .btn.button-9, .swap-slider > .radio-10:checked ~ .nav > .btn.button-10
    {

        padding: 15px;
    }

    .model-toggle > .swap-slider.item-4 > .nav > .btn
    {
        /*width: 50%;*/
        width: 65%;
        display: inline-block;
    }

    .swap-slider > .nav
    {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        position: relative;
    }

    .swap-slider > .nav:after
    {
        /*content: "";*/
        display: block;
        width: 0px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.4);
    }

    .swap-slider.swap-img-slider > .nav
    {
        display: none;
    }

    .content-wrapper .body
    {
        padding: 50px 0;
    }

    .mB6, .mV6, .mA6
    {
        margin-bottom: 15px !important;
    }

    .bonus-box .src
    {
        display: none;
    }

    .car-box
    {
        padding: 20px;
        padding-top: 50px;
    }

    .content-wrapper .head .h1
    {
        margin-top: 380px;
    }

    .h1
    {
        font-size: 1.6em;
    }

    .content-wrapper .head .h2
    {
        display: none;
    }

    .content-wrapper .head .grid-wrapper
    {
        max-width: 85%;
    }

    .content-wrapper .body
    {
        max-width: 90%;
        margin: auto;
    }

    .article-section
    {

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .bonus-box .desc
    {
        position: relative;
        max-width: inherit;
        left: inherit;
        top: inherit;
    }

    .mH4
    {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .img
    {
        display: block;
    }

    .img.fR,
    .img.fL
    {
        float: none !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .img > img,
    .img > .src
    {
        display: block;
        margin: auto;
    }

    .article-section
    {

    }

    .breadcrumb
    {
        margin-top: 3em;
        display: block;
    }

    .rating
    {
        display: block;
        text-align: center;
    }


    #footer .content-wrapper.contact-box .headline
    {
        margin: auto;
    }

    .clForm .element > label + .user-interaction
    {
        max-width: 100%;
        width: 100%;
    }

    #home
    {
        margin-top: 30px;
        margin: 2rem auto;
        padding: 0;
        /*max-width: 100%;*/
    }

    #footer a
    {
        display: block;
        padding: 10px;
    }

    #footer .spacer
    {
        display: none;
    }

    .model-toggle .icon.icon-auto
    {
        /*width: auto;*/
        height: 100px;
    }

    #footer .link.mR2
    {
        margin-right: 0 !important;
    }

    .content-wrapper .info-slider .head .bg
    {
        padding-bottom: 0;
    }

    .h1.top
    {
        /*font-size: 2em;
        padding: 5px 10px;*/
    }

    .content-wrapper .body
    {
        max-width: 98%;
        padding-bottom: 25px;
        padding-top: 25px;
    }

    #map
    {
        height: 350px;
        margin: 0 !important;
    }

    .content-wrapper > .grid-wrapper, .content-wrapper > .body
    {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .article-section
    {
        margin: auto;
    }

    .img.rotate-l
    {
        /*display: none;*/
    }


    .img.rotate-l .src
    {
        padding: 0.5rem 0.5rem 2rem;
        max-width: 90%;
        -webkit-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        transform: rotate(1deg);
        margin: 1rem auto;
    }

    .route-slider .swap-slider .nav > .btn
    {
        font-size: 1.5rem;
        line-height: 2.5rem;
        padding: 0.5rem;
        margin: 0.5rem auto;
    }

    .logo-slider .swap-slider.swap-horizontal.swap-part-slider > .mask > .list > .item
    {
        width: 100%;
        width: calc(100% / 1);
    }

    .map-route iframe
    {
        height: 300px;
    }

    .timeline
    {
        max-width: 90%;
        margin: auto;
    }

    .timeline .item
    {
        margin: 0px 0 25px 0;
        position: relative;
    }
}


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

    .bonus-box
    {
        min-height: 230px;
    }

    #Preise .gutschein
    {
        display: none;
    }

    .anfrage-wrapper
    {
        padding: 5px;
    }


    #map
    {
        height: 300px;
    }
}

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

    #menu.open ~ #page-wrapper
    {
        margin-left: 225px;
        max-width: calc(100% - 225px);
        overflow: hidden;
        margin-left: 225px;
        max-width: calc(100% - 225px);
    }

    #menu.open ~ #page-wrapper .content-wrapper > .body
    {
        max-width: calc(100% - 200px);
        margin: auto;
    }
}