@import url('myfonts.css');
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; vertical-align:baseline;}
/* html5 and ie7 in need of display:block where necessary */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
nav ul, nav li {margin:0; list-style:none;}

/* structure */
html, body {margin:0; text-align:left; font-family:MymraMono, sans-serif; font-size:17px; color:#000; line-height:1.3em;}
.container.top {margin-top:20px;}
.mobya {display:none;}

.mt-00 {margin-top: 0px;}
.mt-04 {margin-top: 4px;}
.mt-06 {margin-top: 6px;}
.mt-10 {margin-top: 10px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-50 {margin-top: 50px;}
	
/* general */
h1, h2, h3 {color:#933; font-weight:normal; margin:0;}
.title-large {font-size:1.4em; padding:6px; line-height:1.5em;}
.title-medium {font-size:1.2em; padding:6px; line-height:1.5em;}
.title-small {font-size:1.2em; padding:6px; line-height:1.2em;}
.title-verysmall {font-size:1.0em; padding:10px 6px 2px 6px; line-height:1.1em; font-weight:normal; margin:0;}

#h1small, 
p, 
address {font-size:0.9em; color:#000; padding:6px; text-align:left;}
#h1small {font-weight:bold;line-height:1.5em;}
sup {vertical-align:super;}


.artlead {margin:10px 0 20px;}
.artmain, .artleft, .artcenter, .artright, .artcallto {margin:10px 0 0 0; overflow:auto;}
.artmain {background-color:#fff;}
.artmain a {color:#333; text-decoration:none; font-weight:bolder;}
a {color:#333; text-decoration:none;}
a:hover, 
address a:hover {color:#933; text-decoration:underline;}
address a {color:#933; font-weight:normal;}
address {font-style:normal; font-size:.9em; color:#000; padding:6px; text-align:left;}

@media screen and (max-width:767px) {
	.artlead {margin:10px 0 10px;}
}

.artmain ul {margin:0 0 6px 20px; font-size:0.9em;}
.artmain ul li {padding:2px 6px; line-height:1.3em; list-style:url(../images/listlink.gif);}
.artmain li a:hover {color:#933;}
.artmain li a {color:#000;}
.xartmain h4 a {color:#933; font-size:0.8em;}
.artmain h4 {color:#933;}

ol {margin:0 0 4px 20px; list-style:none;}
ol li {font-size:0.9em; padding:2px 6px 0 12px; line-height:1.3em;}
ol li.zonderpijl {font-size:0.9em;}

.fa.fa-download,
.fa.fa-external-link,
.fa.fa-file-pdf-o,
.fa.fa-link {font-size:1.0em; padding-left:4px;}

.notice {margin:0; background:url(../images/geeltje3-c.png) no-repeat top; background-size:cover;}
.notice h2 {font-variant:small-caps; margin-top:0; padding:66px 6px 6px; text-align:left;} /*ivm geeltje */
.notice h3 {margin-top:16px; padding:6px 6px; font-size:0.95em; text-align:left; color:#fff; background-color:#900;}
.notice p {font-size:0.75em; padding:6px; margin:6px 0 0 0;}
.notice a {color:#933;}
.notice img {background:transparent; padding:6px 6px 12px 6px;}

.socnet {padding:0; margin:40px 0 0 6px; display:inline-block;}
.socnet .fa {padding-left:10px;}

@media screen and (max-width:767px) {
	.socnet {display:inline-block; margin:6px auto;}
}

@media screen and (max-width:767px) and (min-width:551px) {
	.notice h2 {padding:60px 6px 6px;}
}

@media screen and (max-width:550px) {
	.notice h2 {padding:46px 6px 6px;}
}

.privacytekst {font-size:0.85em;line-height:1.2em;}

/* footer */
footer {height:36px; width:100%; margin:30px 0; border-top:solid 1px #933;}
footer #p1 p {font-size:0.8em; color:#333; padding:6px 2px 6px 0px}
footer #p2 address {color:#fff;}
footer a {color:#933; text-decoration:none;}
footer a:hover {color:#333; text-decoration:underline;}


@media screen and (max-width:1023px){
	footer #p3 {padding:6px 12px 6px 0px; text-align:left;}
}

@media screen and (min-width:768px) {
	#footermob {display:none; visibility:hidden;}
	.mobya {display:none; visibility:hidden;}
}

@media screen and (max-width:767px) {
	#footermob {display:block;	width:100%; margin:10px 0; background-color:#933;}
	#footermob a {text-decoration:none;color:#fff; font-weight:normal;}
	#footermob p {font-size:1em;color:#fff;padding:12px; text-align:center;}
	#footermob #socmedia p {text-align:center;}
	#footermob i {padding:0 16px 0 6px;}	
	#footermob .mob-a a {font-weight:normal;	color:#fff;}
	footer, .socnet {display:none; visibility:hidden;}
	.mobya {display:block;}
	.mobno {display:none; visibility:hidden;}
	.btn {border:1px solid #888; height:46px;} 
	.btn.btn-call {background-color:#fff;}
	.btn.btn-call a {color:#000;}
} 	

@media screen and (max-width:500px) {
	#footermob {margin-top:6px;}
	.mobya {display:block;}
	.mobno {display:none; visibility:hidden;}
}


/* tariffpage table */
table.tar {width:100%; border-collapse:collapse; padding:0; margin:0; margin-top:10px;}
.tar thead {font-size:0.9em; border-right:1px solid #fff; padding:1px; background-color:#222; color:#fff; text-align:right;}
.tar td {font-size:0.8em; border: 1px solid #777; padding:1px; background-color:#f2f2f2; text-align:right;}
td.tar0 {text-align:left; width:40%;}
td.tar1 {text-align:left; width:48%;}
td.tar2 {text-align:right; width:20%;}
td.tar3 {text-align:left; width:75%;}
td.tar4 {text-align:right; xwidth:25%;}
sup {font-size:0.7em;}

.tar tr:hover td {background-color:#f0e68c; color:#000;}
.tar tfoot {line-height:1.2em;}
.tar tfoot td {font-size:0.7em; text-align: left;}
.tar a {color:#fff;}
.tar a:hover {text-decoration: underline; color:#fff;}


@media screen and (max-width:670px) {/*iphone */
	.tar td, .tar thead {font-size:0.7em;}
	p.tar {font-size:0.8em; line-height:1.0em;}
}

.tube {
	position:relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:25px;
	height:0;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:hidden; 
}
.tube iframe {
	position:absolute;
	top: 0;
	left: 2px;
	width:100%;
	height:100%;
	margin-top:0px;
}

#links {margin:0;}
#links li {padding:0; list-style:none;}
#links li a {font-size:12px; color:#000;}
#links li a:hover {color:#933; text-decoration:underline;}


/* contact en aanmelding */
.contact-ul {display:inline; list-style:none;}
.contact-ul li i {padding-right:8px;}
fieldset {border:1px solid #e2e2e2; font-size:0.85em;}
.form-horizontal {background-color:#fff; margin:0px 0; border:1px solid #d6d6d6; font-size:.85em; width:100%;}

.form-horizontal .form-control {border-radius:0; background-color: #f8f8f8; margin-left:2px;} 
.form-horizontal .control-label {font-weight:bold; color:#222; margin-left:2px; text-align:left; width:98%; margin-top:0;margin-bottom:0;}

.form-horizontal .form-group {margin-top:0px; margin-bottom:10px; padding:0; margin:0 2px;}
.form-horizontal .form-group.top {margin-top:20px;}
.form-horizontal .form-group .radio-inline {font-weight:bold; color:#222; margin-left:20px;}
.form-horizontal .form-group .radio {font-weight:bold; color:#222; margin-left:24px;}
.form-horizontal .form-group .drop {margin-left:6px; margin-bottom:10px; height:24px;}
.form-horizontal .form-group .checkbox {margin-left:24px;}
.form-horizontal .form-group select {color:#900; background-color: #fff;}


   input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #fff;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #888;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #888;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #888;
    }


#submit  {margin-left:6px;}
textarea {resize:none;}
p.text-danger {font-size:1.0em; margin-left:6px; padding-top:10px; color:#900;}

/* ALERTS */
.alert.alert-success, 
.alert.alert-danger,
.alert.alert-info {border-radius:0; font-size:1.0em; padding:10px; border:1px solid #888; color:#333; font-weight:700;}
.alert.alert-success {background-color:#dff0d8;} 
.alert.alert-danger {background-color:#ffb7b7;}


@media screen and (max-width:767px) {  
	.form-group {margin-bottom:15px;}
	.form-horizontal {margin:10px 0; width:100%;}
	.form-horizontal .form-control {margin-left:3px; margin-right:1px;width:98%;}
	.form-horizontal .control-label {margin-left:6px;}
	.form-horizontal .form-group .radio-inline {margin-left:24px;}
	.form-horizontal .form-group .radio {margin-left:24px;}
	.form-horizontal .form-group .drop {margin-left:6px; margin-bottom:10px;}
	.form-horizontal .form-group .checkbox {margin-left:24px;}
}

@media screen and (max-width:500px) { 
	.form-horizontal .form-control {margin-left:6px; margin-right:1px;width:98%;} 
	.form-horizontal .control-label {margin-left:10px;}
	.form-horizontal .form-group .radio-inline {margin-left:24px;}
	.form-horizontal .form-group .radio {margin-left:24px;}
	.form-horizontal .form-group .drop {margin-left:10px; margin-bottom:10px;}
	.form-horizontal .form-group .checkbox {margin-left:24px;}
}


.btn {border-radius:0;}  
.btn:focus,
.btn:active {background-color:#933 !important; border-color:#222 !important;}  
 
.btn-primary {background-color:#933; border-color:#222; color:#fff; font-size:1em; margin-left:0px;}
.btn-primary:hover, 
.btn-primary:focus,
.btn-primary:active {background-color:#933; border-color:#222; color:#fff;}

.btn-call {background-color:#fff; border-color:#222; color:#222; font-size:1em; margin-left:0px; padding-top:10px;}