@media screen and (max-width: 1288px) {
    .container {
        width: 100%;
        padding: 0 4px;
    }
}

@media screen and (max-width: 1024px) {
    .graafschapWidget .teamContainer {
        display: inline-block;
        vertical-align: middle;
        width: 25%;
    }

    .graafschapWidget .gameInfoContainer {
        display: inline-block;
        vertical-align: middle;
        width: 50%;
    }
}

@media screen and (max-width: 760px) {
    #top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0;
        border-bottom-width: 50px;
        z-index: 99999;
    }

    #top .container {
        min-height: 0;
    }

    .logo {
        height: 60px;
    }

    .logo img {
        height: 100%;
        width: auto;
        max-width: 1000%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Social media */
    .btnShare {
        position: absolute;
        top: 89px;
        left: 4px;
        display: block;
        width: 32px;
        height: 32px;
        background: #221F20 url('../images/socialmedia/share.png') no-repeat center center;
        border-radius: 50%;
        z-index: 1;
        cursor: pointer;
    }

    .svg .btnShare {
        background-image: url('../images/socialmedia/share.png');
    }

    .socialMediaIcons {
        position: absolute;
        top: 130px;
        left: 0;
        float: none;
        display: none;
        width: 100%;
        padding: 10px 4px;
        background-color: #221F20;
    }

    .socialMediaIcons .socialMediaIcon {
        margin: 0 10px 0 0;
    }

    .socialMediaIcons .socialMediaIcon:hover {
    }

    .zoekWidget {
        position: absolute;
        bottom: -40px;
        right: 4px;
        float: none;
    }

    .zoekWidget .zoekWidgetInput,
    .zoekWidget .zoekWidgetSubmit {
        background-color: #221f20;
    }

    .zoekWidget .zoekWidgetSubmit:hover {
        background-color: #1b191a;
    }

    .btnMobileNavigatie {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 80px;
        height: 80px;
        background: url('../images/icons/mobilenav.png') no-repeat center center;
        cursor: pointer;
    }

    .navigatie {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 50px);
        overflow-y: scroll;
        background: #221f20;
        z-index: 999999;
    }

    .navigatie li {
        display: block;
        float: none;
    }

    .navigatie li a,
    .navigatie li p {
        color: #fff;
        border-radius: 0;
        padding-right: 80px;
    }

    .navigatie li .clickableIcon {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 80px;
        height: 40px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url('../images/icons/plus.png');
    }

    .navigatie li .clickableIcon.active {
        background-image: url('../images/icons/min.png');
    }

    .navigatie li ul {
        position: relative;
        top: auto;
        background-color: #1b191a;
        border-radius: 0;
    }

    .navigatie li ul li a,
    .navigatie li ul li p {
        text-transform: uppercase;
    }

    .navigatie li ul li a:hover,
    .navigatie li ul li p:hover {
        background: none;
    }

    #container > .container {
        padding-top: 134px;
    }

    #main,
    #right {
        float: none;
        width: 100%;
    }

    /* Right */
    #right {
        padding-top: 20px;
    }

    .weerWidget.iframe {
        display: none;
    }

    .actieAfbeelding {
        text-align: center;
    }

    /* FOoter */
    #footer {
        color: #fff;
        background-color: #221f20;
    }

    .footerWidget {
        width: 33.333%;
    }

    .footerWidgetList a {
        color: #fff;
    }

    .footerInfo {
        background-color: #1b191a;
        color: #fff;
    }

    .svg li .clickableIcon {
        background-image: url('../images/icons/plus.svg');
    }

    .svg li .clickableIcon.active {
        background-image: url('../images/icons/min.svg');
    }
}

@media screen and (max-width: 560px) {
    .zoekContainer .label,
    .zoekContainer .tv_date,
    .zoekContainer .tvgemistInputTitel {
        display: block;
    }

    .zoekContainer input[type="text"] {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .tv_gemist_clip,
    .tv_gemist_clip:nth-of-type(2n+1) {
        width: 50%;
        color: #221f20;
        background: none;
    }
}

@media screen and (max-width: 480px) {
    .journaalContainer,
    .newsList,
    .gidsWidget {
        float: none;
        width: 100%;
        margin: 2px 0;
    }

    /* Top */
    .logo {
        width: 30px;
        height: 30px;
        margin: 10px 10px 10px 0;
        background: url('../images/logo-regio8-small.png') no-repeat center center;
        background-size: contain;
    }

    .logo img {
        display: none;
    }

    .svg .logo {
        background-image: url('../images/logo-regio8-small.svg');
    }

    /* Social media */
    .btnShare {
        top: 59px;
    }

    .socialMediaIcons {
        top: 100px;
    }


    /* Navigatie */
    .btnMobileNavigatie {
        width: 50px;
        height: 50px;
    }

    .navigatie {
        top: 50px;
    }

    .navigatie li .clickableIcon {
        width: 50px;
    }

    .navigatie li > a,
    .navigatie li > p {
        font-size: 14px;
        padding-right: 50px;
    }

    .navigatie ul li a {
        padding-left: 20px;
        font-size: 14px;
    }

    .zoekWidget .zoekWidgetInput {
        min-width: 0;
        max-width: 140px;
    }

    /* Main */
    #container > .container {
        padding-top: 102px;
    }

    /* Footer */
    .footerWidget {
        float: none;
        width: 100%;
        padding: 10px 0;
    }
}

@media screen and (max-width: 360px) {
    .journaal_home_journaal_header,
    .newsListItem .titel.overlay,
    .nieuwsListTitel,
    .gidsWidget .widgetTitel,
    .weerWidget .titel,
    .nuEnStraksSongContainer,
    .luisterLiveWidget,
    .footerWidget .titel,
    .footerWidgetList,
    .footerWidgetContent {
        padding: 10px;
    }

    .gidsWidget .general {
        padding: 0 5px 0 10px;
    }

    .gidsWidget #tvgids_list .tvgids_item,
    .gidsWidget #rg_gids_list .tvgids_item,
    .gidsWidget #tvgids_list .rg_gids_item,
    .gidsWidget #rg_gids_list .rg_gids_item,
    .gidsWidget #tvgids_list #rg_gids_item_active,
    .gidsWidget #rg_gids_list #rg_gids_item_active,
    .gidsWidget #tvgids_list #rg_gids_item,
    .gidsWidget #rg_gids_list #rg_gids_item {
        padding: 10px;
    }

}

@media screen and (max-width: 760px) and (orientation: landscape) {
    #top {
        position: absolute;
    }
}