@media only screen and (min-width : 321px) and (max-device-width: 480px), (min-device-width : 320px)
and (max-device-width : 480px), (max-width: 320px)
{
	#menu li, #centerColumn, #actualisations, #news, .contentwidth, .achtergrondArtikel, .achtergrondImg, .achtergrondImg img, #achtergrond, #blurb, #leftColumn, #rightColumn, .benchmark .info-column, div.sideColumn  { float:none;}
	#menu ul, .contentwidth, .achtergrondArtikel, #centerColumn, #header, #pageContainer, #menu, #menubottom, #leftColumn, #rightColumn, #rightColumn input, .benchmark .info-column, .benchmark .data-column, div.mainColumn, div.sideColumn, .centerOnly #centerColumn, table, table.kengetal { width:100% !important;}
	#menu, #menu li, #header { height:auto;}
	#header img { width:100%;}
	.achtergrondArtikel { margin-left:0;}
	.achtergrondartikelWrapper { border:0;}
	#leftColumn  { margin-bottom:0; padding-bottom:0;}
	.newsArticlesWrapper .borderBottom { border:0;}
	.contentwidth { border-bottom:1px solid #00BCE4; padding-bottom:20px;}
	#centerColumn, .leftmargin, #rightColumn { margin-left:0;}
	#rightColumn { margin-top:15px;}
	#menu { margin-bottom:15px; -webkit-box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0.2);

        box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0.2);}
    #link-wrapper {
        width: 100%;
        background-color: #4C7223;
        display: inline-grid;
        grid-template-columns: auto auto;
        justify-content: right;
    }
    #link-wrapper a {
        display:block; height:25px; padding:5px 35px 5px 5px; color:#fff; text-align:right; text-decoration:none;
    }
    a#login-link { text-transform: uppercase; font-weight: bold; font-size: 11px; padding-right: 20px; }
	#nav-control{ background:url(../img/nav-control.png) right 4px no-repeat; }
	/*#menu .expand-content { display:none; }*/
	#nav-control.expanded { background-position: right -23px}

	#menu li { display: block; width:auto !important; margin:0 0 0px 0;}

	#menu li a { display:block; width:auto; border:1px solid #3D6119; border-top:0; padding:10px 0 10px 1em;
        background: rgb(245,246,241); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(245,246,241,1) 0%, rgba(237,242,225,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,241,1)), color-stop(100%,rgba(237,242,225,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(245,246,241,1) 0%,rgba(237,242,225,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(245,246,241,1) 0%,rgba(237,242,225,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(245,246,241,1) 0%,rgba(237,242,225,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(245,246,241,1) 0%,rgba(237,242,225,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f1', endColorstr='#edf2e1',GradientType=0 ); /* IE6-9 */
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
        box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	}
	#menu li:first-child { border-top:1px solid #3D6119;}
	#menu li.menu-current { background:none; }
	#menu li.menu-current a {
    	background: rgb(101,132,70); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(101,132,70,1) 0%, rgba(61,97,25,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(101,132,70,1)), color-stop(100%,rgba(61,97,25,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(101,132,70,1) 0%,rgba(61,97,25,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(101,132,70,1) 0%,rgba(61,97,25,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(101,132,70,1) 0%,rgba(61,97,25,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(101,132,70,1) 0%,rgba(61,97,25,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#658446', endColorstr='#3d6119',GradientType=0 ); /* IE6-9 */
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
        box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	}
	.menuItemCenter { margin:0;}
	#menubottom { display:none }
	#rightColumn input { width:100%; margin:4px 0 10px;}
	#rightColumnContent, #rightColumn{ margin-bottom:10px; padding-bottom:0; }
	#header img { display:none;}
	#header { background:transparent url(../images/logo_benb_mobile.png) 0 0 no-repeat; height:90px; background-size: contain;}
	#rightColumn .loginBox { overflow:hidden;}
    #rightColumn .become-member { overflow:hidden;}
	/*#rightColumn label { display:inline-block; float:left; width:25%; min-width:75px; margin-right:1%;}
	#rightColumn input { display:inline-block; float:left; width:85%; margin:0 0 10px; }
	#rightColumn input.button {  float:right; clear:both; margin-right:9%; }*/
	.achtergrondArtikel { clear:both; float:none;}
	.achtergrondImg img { width:100%;}
	#rightColumn div form { overflow:hidden;}
	/*#centerColumn { overflow:auto;}*/
	.noLeft #centerColumn { width:100%;}
	table.ranking { overflow: scroll; width:100%;}
	.benchmark .data-column input { max-width:75%;}
	.benchmark .data-column input[type=checkbox], .benchmark .data-column .button{ width:auto;}
	.benchmark .data-column table { width:auto; margin-bottom:20px; }
	.benchmark .data-column table p { width:60%; margin-top:10px;}
	#bodyContainer { padding:0 5px;}
	#centerColumn select { max-width:100%;}
	#centerColumn select.limitWidth { max-width:140px;}
	table.zoek td input{ max-width:150px; }
	#centerColumn table.zoek td select.kengetal, #centerColumn table.zoek td select.regio {max-width:115px;}
	div.specialNotice { }

    #extraCompanyInfo { display: none; }

	.mobileOnly { display:block; }
	.mobileOnly #subscriptions, .mobileOnly p {background-color:#E4E9D7; padding:12px; margin:0;}
	.nonMobileOnly { display:none;}
	#leftColumn a.expander, a.expander { color:#fff; text-decoration:none; background:url("../img/expander-control.png") no-repeat scroll right 3px #00BCE4; display:block;background-color:#00BCE4; padding:4px 0 4px 12px; font-weight:bold; text-transform:uppercase; font-size:11px;}
	#leftColumn a.expander.expanded, a.expander.expanded { background-position: right -25px;}
	div.sideColumn  { clear:both;}
	div.expand-content.collapsed { display:none; }

	table.kengetallen {  border:0px solid red; }
	.table-wrap { position:relative; padding-top:21px; width:100%; overflow:scroll; -webkit-overflow-scrolling: touch;}
    .table-wrap:after {content:'‹‹ Scroll de tabel ››'; opacity:0; /* display:none; */ background-color:#D7EEF7; position:absolute; left:0; right:0; top:0px; text-align:center; height:15px; padding:3px 0;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .table-wrap.user-message-scroll:after {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .table-wrap.user-message-scroll:after {/* display:block; */  opacity:1;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
	.mainColumn img { max-width:100%;}
	.mainColumn .printButton img { width:auto;}
	.benchmark input[type=text] { max-width:155px !important;}
	#actualisations { width: 100%; }
	#actualisations .contentArea { max-height: none; overflow: auto;}
	#governance ul { width:auto;}

    ul.withSideBar { width: auto; float:none; }

    #home,
    #nieuws-abonnement .innerHold,
    #profiel-abonnement .innerHold,
    #compleet-abonnement .innerHold,
    #home .intro .introText,
    .branchesOverview ul li
    {
       width: 100%;
       float: none;
	   margin-left: 0 !important;
	   margin-right: 0 !important;
    }
    #home .intro .subscriptionMatrix {
       max-width: 100%;
       float: none;
    }
    .branchesOverview .branche .onoffswitch {
       margin-right: 20px;
    }

    #progressbar li {
       width: 100%;
       float: none;
    }
    #progressbar li::before{
       margin: 0 auto 50px auto;
       padding-bottom: 20px;
    }
    #progressbar li::after {
       width: 2px;
       height: 100%;
       left: 50%;
       top: -60px;
    }
    #progressbar li span {
       display: inline-block;
       margin-top: -75px;
       position: absolute;
       left: 0;
       width: 100%;
    }
    .accountData li span {
      width: 30%;
      margin-right: 2%;
      font-weight: bold;
    }
    div.productOverviewContainer {
        overflow: auto;
        width: 80vw;
    }

    div.marketNewsHighlight img.photo {
        width: auto;
        margin: 0 0 0 10px;
        float: none;
    }
    div.newsHighlight div.newsArticle,
    div.marketNewsHighlight div.newsArticle {
        width: auto;
        float: none;
        margin: 10px 5px;
    }
    div.newsHighlight div.newsArticleBorder {
        display: none;
    }
    div.newsHighlight {
        border-top: solid #01B5DD 1px;
    }
    div.newsHighlight div.newsArticle {
        border-bottom: solid #01B5DD 1px;
        margin-bottom: 15px;
    }
	#home .newsHighlight .newsArticle {
		width:auto;
	}
	
	.news-featured .article-image,
	.news-featured .wrapper,
    .news-featured.projects .article-image,
    .news-featured.projects .wrapper,
	.company-news ul li,
	.company-news ul li .article-image,
	.company-news ul li .article-image .wrapper {
		float: none;
		width: 100%;
		height: auto;
	}
	.company-news ul li,
	.company-news ul li .article-image {
		margin-bottom: 20px;
	}
	#subscriptionPageContents fieldset {
		padding: 5px 10px;
	}
    .projectImage { float:none; width: 100%; }
    .projectDescription { width: 100%; }
}

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
    #rightColumn input{ width:65%; }
	#rightColumn input.button { margin-right:9.5%;}
}

@media only screen and (max-width: 320px){
	#header { height:73px; }
}