/* First settings */
#menu { display:none; }

/* Kan zijn dat breekpunt al op 712px ingezet moet worden - EB 26-09-2013 */
/* :: Typography */  
@media handheld, only screen and (max-width:660px) {
/*
h1 { font-size: 32px; font-size: 3.2rem; line-height: 1.3; }
h2 { font-size: 28px; font-size: 2.8rem; line-height: 1.3; }
h3 { font-size: 21px; font-size: 2.1rem; line-height: 1.3; }
h4 { font-size: 18px; font-size: 1.8rem; line-height: 1.2; }
h5 { font-size: 16px; font-size: 1.6rem; line-height: 1.2; }
h6 { font-size: 15px; font-size: 1.5rem; line-height: 1.2; }
body .c2, p, .footer {  font-size:0.8rem; line-height:1.4; }
*/

}

/* disable iphone button styling */
input { -webkit-appearance: none; }

/* :: Images-Video */
@media only screen and (max-width:820px) {
.news-img img, .news-single-img img,
#main DIV.csc-textpic .csc-textpic-imagewrap,
#main DIV.csc-textpic .csc-textpic-imagewrap img { max-width:100%; height:auto; }
.news-single-img { float:none; }
.news-single-img img { margin:0.2em 0; width:100%; }
}

/* :: Design */
@media only screen and (max-width:820px) {
#bread, #tools, #titelbalk em { display:none; }
#content, #sidebar, #sub { margin:0; padding:0; width:100%; }
#titelbalk { padding-left:20px; }
#logo a { width:110px; }
}

/* :: Navigation */
@media only screen and (max-width:820px) {
.nav_bar { height:30px; }
.nav_bar #menu {   
  background:#f7d7b6 url(../images/bg-menu.png) no-repeat 8px 9px;  
  color:#000; cursor:pointer; font-size:1.1em; font-weight:normal; text-indent:22px;
  display:block; position:relative;
  height:28px; line-height:29px; width:62px;
  left:20px; top:10px; position:absolute; z-index:5;
}
.nav_bar .subitem { 
  background:url(../img/arrow-blue.png) no-repeat left 8px; 
  cursor:pointer; display:block; text-indent:-9999px; overflow:hidden;
  left:0; top:0; position:absolute; height:20px; width:100%; z-index:10;
}
.nav_bar .subitem.change { background-image:url(../img/arrow-down.png); background-position:left 10px; width:18px; }

.nav_bar ul.nav_main { 
  display:none;
  background:#e37600; padding:0; 
  position:relative; top:23px; z-index:100; 
}
.nav_bar ul.nav_main ul { display:none; visibility:inherit !important; }

.nav_bar ul.nav_main li { display:block; line-height:20px; height:auto; float:none; position:relative; }
.nav_bar ul.nav_main li.last a { border:none; }
.nav_bar ul.nav_main a { border-bottom:1px solid #f7d7b6; background:url(../images/arrow-white.png) no-repeat 14px 12px; color:#fff; font-size:1.3em; display:block; padding:6px 6px 6px 28px; }
.nav_bar ul.nav_main li a:hover, .nav_bar ul.nav_main li.active a, #home .nav_bar ul.nav_main li:first-of-type a { background-image:url(../images/arrow-black.png); }
.nav_bar ul.nav_main .sel a, .nav_bar ul.nav_main .active a { background-color:#f7d7b6; color:#000; }

.nav_sub { background:#fbead9; border:1px solid #f6d4b2; }
.nav_sub li a { background-position:10px 14px; padding:0.4em 0.4em 0.4em 24px; }
}

/* :: Grid */  
@media only screen and (max-width: 820px) {    
body { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; width:100%; min-width:0; margin-left:0; margin-right:0; padding-left: 0; padding-right: 0; }

.content_wrapper2, .c2 { margin:0 7px; }
.content { padding-top:190px; }
#content .content_main, #content .breadcrumb {
  max-width:70%;
  float:right; left:0;
  margin:0; padding-right:0;
}

#content .content_add { float:left; left:0; }
#content .nav_sub {
  margin:0 0 1em 0; width:25%;
  position:inherit; top:0;
  float:left;
}

#hoofd_content { margin:0; }
#home .content { padding-top:180px; }
#nav-intro, #intro-right, .banner.service, .banner.alert { 
  max-width:100%; 
  margin:0 0 20px 0;
}

/*#nav-intro .frame-03 { height:150px; min-height:150px; height:auto !important; max-width:43.8%; width:96%; }
#nav-intro .frame-03:nth-child(1) { margin-right:3.4%; }
*/
/* :: Extensions */
.uni_node .uni_node_body {
  background:#f2f2f2; 
  border:1px solid #dddddd;
  margin:0 0 7px 0; padding:0px;
}
.uni_result.uni_result_menu_endnode .uni_node .uni_node_body { padding:2%; }
.uni_result.uni_result_menu_endnode .uni_node .uni_node_body ul { list-style-position:inside; }

.uni_result.uni_result_portal .uni_nodes { 
  column-count:2;
  -moz-column-count:2; /* Firefox */
  -webkit-column-count:2; /* Safari and Chrome */
}

.content .uni_node { float:none; width:99%; }
.content .uni_node_even { clear:none; margin:0; }
.uni_node .uni_node_body { margin-top:3px; }
.uni_node ul { margin:0; }
.uni_node li { border-bottom:1px solid #ddd; margin:0; padding:4px; }
.uni_node a:link { background-position:-2px 4px; display:block; color:#000; font-weight:bold; padding-left:20px; }
.uni_node .uni_node_more { background:#ddd; padding:4px; }
.uni_node .uni_node_more a { font-weight:normal; }
br.uni_br_clear { display:none; }

#content .content_main.wide {max-width: 96%; width: 96%;}


}

/* :: Mobile view */
@media only screen and (max-width: 600px) {
#nav-intro .frame, #content .content_main .frame { min-height:10px; padding-bottom:15px; max-width:96%; width: 96%; margin:0 0 7px 0; left:0; bottom:0; position:relative; }
}


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

#titelbalk, .breadcrumb, #intro_blok #logo  { display:none; }
#content .content_main, #content .content_add, #content .nav_sub {  display:block; float:none; margin:0 0 1em 0; max-width:100%; width:99.5%; }

.content, #home .content { padding-top:198px; }
.header .branding { height:75px; min-height:75px; }
.header .branding img { margin:-10px 0 0 0; }

.banner.service, .banner.alert { margin:0 0 7px 0; }

#home #nav-intro { background:none !important; min-height:10px; margin:0;}
.colWrap, #right.content_add,
.colWrap #left, .colWrap #center { clear:both; float:left; margin:0 0 7px 0; max-width:100%; }

.orange .nav_bar { border:none; height:26px; }
.nav_bar ul.nav_main { border-top:1px solid #f7d7b6; top:15px; }
.nav_bar #menu, .search { left:7px; top:7px; }
.search { left:auto; right:7px; }
.func_links { background:#fbebdb url(../images/svg/logo_digid.svg) no-repeat 7px 7px; background-size:62px 61px; top: 125px; margin:0 7px; height:77px; width:97%; }
.func_links ul, .func_links li { float:none; }
.func_links a { border:0; }
.func_links a.login:link {
  background-image:url(../images/icon-login.png); background-repeat:no-repeat; background-position:7px 8px; text-indent:16px;
}

#service_menu.func_links ul { clear:both; display:block; margin:0 8px 0 78px; }
.func_links a:link { background:#f7d7b6; color:#000; display:block; float:right; margin:8px 0 0 0; padding:3px 7px; width:94%;}


.foldable .foldout, .uni_node_head.foldout { background:url(../images/foldable.png) no-repeat right 17px; border-top:3px solid #e37600; cursor:pointer; padding-top:7px; }
.foldable .foldout.open, .uni_node_head.foldout.open { background-position:right -28px; }
#home .foldable .foldout { border:none; }

#home #hoofd_content p a.internal-link {
  background: url("../images/arrow-white.png") no-repeat scroll 12px 12px #E17000;
  bottom: 0;
  color: #FFFFFF; font-family: Arial,Helvetica;
  font-size: 1.2em; font-weight: bold;
  padding: 4px 10px 4px 24px;
  float:right; text-decoration: none; 
}

.content .uni_node, .content .uni_node_even { clear:both; float:none; width:100%; margin:0 0 7px 0; }
.content .uni_node_head { margin:0; }
.uni_single .uni_result_menu_endnode { left:0; max-width:100%; padding:0; }
.uni_node_head.foldout { background-position:right 14px; }
.uni_node_head.foldout.open { background-position: right -33px;}
.content .uni_node_head h2 { margin:0; }
.uni_result.uni_result_portal .uni_nodes { 
  column-count:1;
  -moz-column-count:1; /* Firefox */
  -webkit-column-count:1; /* Safari and Chrome */
}

}


/* :: Mobile Visibility Affordances
---------------------------------------------------*/
.show-on-phones { display:none !important; }  
.show-on-tablets { display:none !important; }
.show-on-desktops { display:block !important; }

.hide-on-phones { display:block !important; }  
.hide-on-tablets { display:block !important; }
.hide-on-desktops { display:none !important; }


@media only screen and (max-width: 767px) {
.hide-on-phones { display:none !important; }
.hide-on-tablets { display:block !important; }
.hide-on-desktops { display:block !important; }

.show-on-phones { display:block !important; }
.show-on-tablets { display:none !important; }
.show-on-desktops { display:none !important; }
}


/* -------------------------------------------------- 
:: Forms
---------------------------------------------------*/  

@media only screen and (max-width: 767px) {
div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea,
form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display:block; width:90%; padding:2%; }
form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
form.nice div.form-field.error small, form.nice small.error { padding:2%; display:block; }
form.nice div.form-field.error .small + small, form.nice .small + .error { width:auto; }
form.nice div.form-field.error .medium + small, form.nice .medium + .error { width:auto; }
form.nice div.form-field.error .large + small, form.nice .large + .error { width:auto; }
form.nice div.form-field.error .expand + small, form.nice .expand + .error { width:auto; }

/*
form label { float:none; padding:1%; text-align:left; width:90%; }
input, select, textarea { padding:1%; width:90%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
*/
.check-radio fieldset { padding-left:0px; }
input[type='checkbox'], input[type='radio'] { width:auto; }
}


/* -------------------------------------------------- 
:: UI
---------------------------------------------------*/  

/* Buttons */
@media only screen and (max-width: 767px) {
.button { display:block; }
button.button, input[type="submit"].button { width:100%; padding-left:0; padding-right:0; margin-bottom:5px; }
}

/* Tabs */  
@media only screen and (max-width: 767px) {
dl.tabs.mobile, dl.nice.tabs.mobile { width:auto; margin:20px -20px 40px; height:auto; }
dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float:none; height:auto; }

dl.tabs.mobile dd a { display:block; width:auto; height:auto; padding:18px 20px; line-height:1; border:solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
dl.tabs.mobile dd a.active { height:auto; margin:0; border-width:1px 0 0; }

.nice.tabs.mobile { border-bottom:solid 1px #ccc; height:auto; }
.nice.tabs.mobile dd a { padding:18px 20px; border:none; border-left:none; border-right:none; border-top:1px solid #ccc; background: #fff; }
.nice.tabs.mobile dd a.active { border:none; background:#00a6fc; color:#fff; margin:0; position:static; top:0; height:auto; }
.nice.tabs.mobile dd:first-child a.active { margin:0; }

dl.contained.mobile, dl.nice.contained.mobile { margin-bottom:0; }
dl.contained.tabs.mobile dd a { padding:18px 20px; }
dl.nice.contained.tabs.mobile dd a { padding:18px 20px; }

dl.tabs.mobile + ul.contained { margin-left:-20px; margin-right:-20px; border-width:0 0 1px 0; }
}

/* Nav Bar */
/* Modernizr-enabled tablet targeting */
@media only screen and (max-width: 1280px) and (min-width: 768px) {
.touch .nav-bar li a { font-size:13px; font-size:1.3rem; }
.touch .nav-bar li.has-flyout>a.flyout-toggle { padding: 20px; }
}

@media only screen and (max-width: 767px) {
.nav-bar { height:auto; }
.nav-bar>li { float:none; display:block; border-right:none; }
.nav-bar>li>a.main { text-align:left; border-top:1px solid #ddd; border-right:none; }
.nav-bar>li:first-child>a.main { border-top:none; }
.nav-bar>li.has-flyout>a.flyout-toggle { position:absolute; right:0; top:0; padding:22px; z-index:2; border-left:1px dashed #eee; display: block; }
.nav-bar>li.has-flyout>a.flyout-toggle span { content:""; width:0; height:0; border-left:4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; }
.nav-bar>li.has-flyout>a.flyout-toggle:hover span { border-top-color:#141414; }

.flyout { position:relative; width:auto; top:auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
.flyout.right { float:none; right:auto; left:-1px; }
.flyout.small, .flyout.large { width:auto; }
.flyout p:last-child { margin-bottom:18px; }
}


/* Tooltips */
@media only screen and (max-width: 767px) {
.tooltip {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 7px 10px 9px 10px;
}
.tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub {
  border-color: transparent transparent rgb(0,0,0) transparent;
  border-color: transparent transparent rgba(0,0,0,0.85) transparent;
  top: -12px;
  left: 10px;
}
}


/* Video */
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top:0; }
}