/*@media only screen and (max-width: 1150px)
{
    div.Narrow table.tabelle .largeScreen
    {
        display: none;
    }
}
*/
@media only screen and (max-width: 768px)
{
    [class*="col-"],
    .header,
    .footer,
    .navigation,
    .leftColumn40Percent,
    .rightColumn40Percent
    {
        width: 100%;
    }

    .fullscreen
    {
        width: 100%;
        left: 0;
    }

    .largeScreen
    {
        display: none;
    }

    .smallscreen
    {
        display: block;
    }

    .header
    {
        height: 50px;
    }

        .header img
        {
            height: 45px;
            width: auto;
        }

        .header h1
        {
            font-size: 2rem !important;
            font-weight: bold;
        }

    .menubar
    {
        height: 1.5em;
    }

    ul.menu
    {
        height: 1.5em;
        box-sizing: border-box;
        padding-left: 5px;
        display: block;
    }

        ul.menu li
        {
            display: block;
            float: left;
            padding-left: 5px;
            padding-right: 5px;
            border-right: 1px solid white;
            height: 2.75em;
            padding-top: 0.25em;
            font-size: 0.9em;   /* important for drop down menu in case of narrow screens */
        }

        ul.menu a img
        {
            display: none;
        }

        table.tabelle .largeScreen
        {
            display: table-cell;
        }

    #slideOutSmall
    {
        float: left;
        width: 100%;
        text-align: left;
        height: auto;
        border-radius: 5px;
        padding: 0px;
        border: 1px solid #e3483c;
        margin-top: 0px;
    }

        #slideOutSmall:hover
        {
            width: 100%;
            border: 1px solid #e3483c;
        }

        #slideOutSmall h2
        {
            width: 100%;
        }

        #slideOutSmall > div,
        #slideOutSmall:hover > div
        {
            display: block;
            background-color: white;
            padding-left: 10px;
            padding-right: 10px;
        }

    ul.Fastnavigation
    {
        text-align: center;
    }

    ul.Fastnavigation li
    {
        display: inline-block;
        width: auto;
        border-bottom: none;
        border-right: 1px solid black;
    }

        ul.Fastnavigation li:last-child
        {
            border-right: none;
        }

        ul.Fastnavigation li a
        {
            display: inline;
        }
}

@media only screen and (max-width: 600px)
{
    *
    {
        font-size: 1rem;
    }

    .menuIcon
    {
        /*background: #e3483c url(../img/layout/ui_background_red.png);
        background-size: contain;*/
        height: 1.5em;
        margin: 0;
        padding: 0;
        display: block;
    }

        .menuIcon img
        {
            width: 1.5em;
            height: 1.5em;
            border: none;
            float: right;
            top: 0px;
            right: 0px;
        }

    ul.menu
    {
        position: relative; /* Wird benötigt, damit z-index Wirkung zeigt... */
        height: 18.5em;
        display: none;
        background:inherit;
        background: #e3483c url(../img/layout/ui_background_red.png);
        background-size: cover;
        z-index: 15000;
        overflow: hidden;
        width: 100%;
    }

    ul.menu li,
    ul.menu li.AdminMenu
    {
        display: block;
        float: left;
        width: 100%;
        border-right: none;
        line-height: 1.5em;
    }

        ul.menu li a,
        ul.menu li.AdminMenu a
        {
            display: block;
            float: left;
            width: 100%;
        }

    div.Kader div.Player
    {
        width: 100%;
        max-height: none;
    }

        div.Kader div.Player div.PlayerBorder
        {
            max-width: none;
            max-height: none;
            width: 200px;
            height: 275px;
        }

    .leftColumn350
    {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
        max-width: none;
        width: 100%;
    }

        .leftColumn350 > img
        {
            border: 1px solid #000;
            border-radius: 5px;
            margin-left: auto;
            margin-right: auto;
		    width: 350px;
            height: auto;
		    max-width: 100%;
        }

        .leftColumn350 a
        {
            display: inline-block;
            margin-bottom: 10px;
            font-weight: bold;
        }

    .rightColumnFill
    {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }

    table.tabelle .largeScreen,
    div.hofPictures
    {
        display: none;
    }

    div.hofMain
    {
        width: 100%;
    }

    div.inputError
    {
        margin-top: 5px;
    }

    ul.menu li.currentPage
    {
        background: none;
    }
}

@media only screen and (min-width: 1200px)
{
    *
    {
        font-size: 1.1rem;
        line-height: 1.4rem;
    }
    .header h1
    {
        font-size: 3rem !important;
    }
}