#mobile-menu-left, #mobile-left, .mobile-only {
    display: none;	
}

/* algemeen voor kleine schermen */
@media only screen and (max-width: 964px) {
    #header-wrapper, #main-wrapper {padding: 0 0;}
    #main {padding: 50px 2%; width: 96%; max-width: 960px;}

    .col {width: 100%; max-width: 72px; margin-right: 0 !important;}
    .col-last { margin-right: 0 !important; }

    #header {display: block; padding: 0 2%; width: 96%;}    
    #header h1 {font-size: 22px; height: 80px; top: 15px; width: 100%;}

    #mobile-menu-left, #mobile-left, .mobile-only {display: block;}

    #menu{display: block; position: absolute; top: 105px; left: auto; width: 96%;}
    #menu ul{list-style: none; -moz-column-gap: 1px; -webkit-column-gap: 1px; -ms-column-gap: 1px; column-gap: 1px;}
    #menu li{float: none; width: 100%; margin: 0; height: 44px;}
    #menu li a, #menu li a.active, #menu li a:hover{margin: 0;}

    /* kalender */
    #activiteit, #activiteitfrontpage{width: 100%; margin-bottom: 4px; }

    .ui-tabs .ui-tabs-nav li, .ui-tabs .ui-tabs-nav li a {width:100%;}

    .col-2 { width: 100%; max-width: 767px; }
    .col-3 { width: 100%; max-width: 767px; }
    .col-4 { width: 100%; max-width: 767px; }
    .col-5 { width: 100%; max-width: 767px; }
    .col-6 { width: 100%; max-width: 767px; }
    .col-7 { width: 100%; max-width: 767px; }
    .col-8 { width: 100%; max-width: 767px; }
    .col-9 { width: 100%; max-width: 767px; }
    .col-10 { width: 100%; max-width: 767px; }

    input[type=text]{width:100%; min-width: 50px;}
    input[type=submit]{width:100%; min-width: 50px;}
    textarea {width:100%; min-width: 50px;}    

    .sponsor, .sponsor img{width: 100%}
}

/* menu in 2 of 3 kolommen afhankelijk van portrait of landscape */
@media only screen and (max-width: 964px) and (orientation:landscape) {
    #header {height: 204px;}
    #menu ul, .sponsor-div{-moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3;}
    #activiteit {width: 48%;}
    .kring {padding: 8px 10px 0 0;}
}

@media only screen and (max-width: 964px) and (orientation:portrait) {
    #header { height: 248px;}
    #menu ul, .sponsor-div{-moz-column-count: 2; -webkit-column-count: 2;-ms-column-count: 2; column-count: 2;}
    .kring {display: inline-block; width: 100%; padding: 16px 0 0 0;}
    .kring img{width: 20%; height: auto; float: left;}
    .kring p {text-align: left; margin-top: 7%; margin-left: 25%; color: #000;}
}

@media only screen and (max-width: 360px){
    .double-column, .three-column, .four-column{-moz-column-count: 2; -webkit-column-count: 2; -ms-column-count: 2; column-count: 2;}
}