@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700);

::selection {background: #0f70a6; color: #fff;}
html, body, div, span, object, iframe,h1,h2,h3,h4,h5, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	margin:0px;
	padding:0px;
	text-align:left;
	border:none;
	text-decoration:none;
	font-family: 'Titillium Web';
}

a[href^=tel]{
    color:inherit;
    text-decoration:none;
}

body {	font-size: 14px; color: #444444;}
.wrapper {margin: 0 auto; position: relative; width: 1025px; height: auto;}
h1 {font-size: 26px; font-weight: 600; color: #0f70a6;}
h2 {font-size: 26px; font-weight: 600; color: #0f70a6;}
.row  {margin: 0 0 30px 0; display: box; display: flex; display: flex-box; overflow: hidden;}
#slider .row {margin: 0;}
p a {color:#0f70a6; }


#mobile {display: none;}
#mobile ul li ul {display: none;}
#mobile ul li:hover ul {display: block;}

#header {padding: 25px 0 0px 0; width: 100%; background: rgba(255,255,255,1); position: absolute; z-index: 999;}
#header img.logo {float: left;}

#header .search {position: absolute; top: -20px; font-family:'Titillium Web'; font-size: 10px;  right: 0;}
#header .search input[type=search] {border: 1px solid #ccc; border-radius: 10px; outline: none;padding: 0px 5px;font-family: 'Titillium Web'; font-size: 12px;}
#header .search button.btn.search {border-radius: 12px; background: #fff;  border: 1px solid #ccc; margin-left: -20px;top: 0px; height: 22px;}

#header .phone {position: absolute; right: 200px; top: -20px; font-size: 12px;}
#header .phone span {font-size: 12px; margin: 0 5px 0 30px;}
#header #menu ul {float: right; margin-top: 25px;height: 54px;}
#header #menu ul li{display: inline-block; margin-left: 22px;padding-bottom: 27px;}
#header #menu ul li a{font-size: 18px; color: #0F70A6; display: block;padding: 4px 10px;}
#header #menu > ul > li > a:hover {background: #0F70A6; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#header #menu ul li ul {display: none; position: absolute; float: none; padding: 0 10px; background: rgba(255,255,255,0.9); margin-top: 19px; height: auto; z-index: 999;}
#header #menu ul li ul li {display: list-item; list-style: none; margin: 0; padding: 0 10px; border-bottom: 1px solid #2ab9eb;}
#header #menu ul li ul li:last-child {border: none;}
#header #menu ul li ul li a {font-size: 16px; font-weight: 600; padding: 6px 0;}
#header #menu ul li ul li a:hover {color:#2ab9eb; }
#header #menu > ul > li.active > a {background: #0F70A6; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

#slider {position: relative;width: 100%; float: left; margin-top: 104px;}
#slides li {list-style: none; }
#slides .slidesjs-container {}
#slides li img {max-width: 100% !important;}

#main {width: 100%; float: left;}

#main .blocks {margin-top: -92px; position: relative; z-index: 998;}
#main .blocks .block.html {background: #fff;padding: 30px 20px 20px 20px; border: 2px solid #0f70a6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; width: 278px;/* overflow: hidden; */}
#main .blocks .column34 .block.html.dark {margin: 0 auto;}
#main .blocks .block.html:hover {
	cursor: pointer;
	border-color: #2AB9EB;
    -webkit-transition: border-color 0.8s linear;
    -moz-transition: border-color 0.8s linear;
    -o-transition: border-color 0.8s linear;
    -ms-transition: border-color 0.8s linear;
    transition: border-color 0.8s linear;}
#main .blocks #blokken_column3.column33 .dark {float: right;}
#main .blocks .block.html .slidebox{width: 100%; display: block; /* padding:  0px 20px; */ margin: -30px -20px; background: #0f70a6;text-align: center;position: absolute;/* height: 148px; */}
#main .blocks .block.html.light .slidebox {background: #2ab9eb; }
#main .blocks .block.html:hover .slidebox {background-color: #2AB9EB;
    -webkit-transition: background-color 0.8s linear;
    -moz-transition: background-color 0.8s linear;
    -o-transition: background-color 0.8s linear;
    -ms-transition: background-color 0.8s linear;
    transition: background-color 0.8s linear;}
#main .blocks .block.html .slidebox h3{ font-size: 19px; color: #fff;font-weight: 400; letter-spacing: 0.13em;vertical-align: middle;display: table-cell; text-align: center; width: 322px; height: 90px; line-height: 1.2em; position: relative; z-index: 2;}
#main .blocks .block.html .textbox {text-align: center; font-size: 14px; font-weight: 400; margin-top: 80px;padding: 0;}
#main .blocks .block.html .textbox p {margin: 0; color: #444444;}
#main .blocks .block.html .circle {position: absolute; width: 55px; height: 10px;  padding: 22px 0;-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; top: 52px; left: 130px; z-index: 0; color: #fff; background: #0f70a6;text-align: center;}
.circle span {-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

#main .blocks .block.html:hover .slidebox .circle {background-color: #2AB9EB;
    -webkit-transition: background-color 0.8s linear;
    -moz-transition: background-color 0.8s linear;
    -o-transition: background-color 0.8s linear;
    -ms-transition: background-color 0.8s linear;
    transition: background-color 0.8s linear;}
#main .blocks .block.html:hover .slidebox .circle span {cursor: pointer;   -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);}
#main .blocks .block.html.light .circle {background: #2ab9eb;}
#main .blocks .block.html .slidebox:hover {}

.block.html.formbutton a {background: #2ab9eb;color: #fff;padding: 10px 20px;width: 282px;float: right;font-size: 17px;font-weight: 600;border-radius: 5px;text-align: center;margin: 0;margin-bottom: 20px;}
.block.html.formbutton a:hover {background:#0f70a6 ; color:#2ab9eb ;}

div#-_column2.column33 div.block.content {margin-left: 16px;
float: left;
margin-top: 0px;
padding: 10px;
/* background: #F1F1F1; */
width: 88%;
margin-bottom: 20px;
border-radius: 5px 5px;
border: 2px solid #0F70A6;}

.block.list.news {}
.block.list.news .item {float: left; width: 31.5%; margin-right: 2.7%;}
.block.list.news .item:last-child {margin: 0;}
.block.list.news .item img {-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;  -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.block.list.news .item h3{font-weight: 600; font-size: 18px; color: #0f70a6; height: auto; margin: 5px 0; }
.block.list.news .item h3 a {font-weight: 600; font-size: 18px; color: #0f70a6; height: auto; margin: 5px 0; padding: 0; background: none; float: none; }
.block.list.news .item h3 a:hover {font-weight: 600; font-size: 18px; color: #2ab9eb; height: auto; margin: 5px 0; padding: 0; background: none; float: none; }
.block.list.news .item p {margin: 5px 0; height: 63px;}
.block.list.news .item a {padding: 0px 10px 3px; background: #0f70a6; color: #fff; font-weight: 600; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: right;}
.block.list.news .item a:hover {background:#0f70a6 ;color: #2ab9eb ;}
.w-100 {width: 100% !important;}
.w-50 {width: 48% !important;}

div.block.calendar.events {margin-left: 16px; float: left; margin-top: 20px;}
div.block.calendar.events h2 {margin-bottom: 10px;}
div.block.calendar div.item {margin-bottom: 10px;padding-bottom: 5px;/* border-bottom: 1px solid #ccc; */position: relative;float: left;width: 100%;margin-bottom: 10px;display: table;}
div.block.calendar div.item:last-child {border-bottom: none}
div.block.calendar div.item:first-child h3 {left: 58px;}
div.block.calendar div.item h3 {font-size: 16px;margin: 0;position: relative;/* top: 0px; */color: #444444;margin-top: 3px;width: 80%;}
div.block.calendar div.item a {display: table-cell;vertical-align: middle;text-align: center;width: 100%;}
div.block.calendar div.item div.content {line-height: 1.2em;}
div.block.calendar div.item div.content a{color: #515050;}
div.block.calendar div.item div.date{ width:44px; float: left; line-height:1; /* float:left; */ margin:3px 7px 0 0; text-align:center; color:#fff; height:36px; padding: 6px 4px 10px; position: relative; background:#2AB9EB; font-size:28px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
div.block.calendar div.item div.date p{ margin:0px; padding:0px; }
div.block.calendar div.item div.date p.small{ font-size: 10px; margin: -1px 0 0 0px; }
div.block.calendar a.button {float: right; padding: 4px 12px; font-size: 12px;margin-top: -22px;}

#footer {width: 100%; float: left; background: #ececec; padding: 15px 0 70px 0;}
#footer ul li{display: inline-block; width: 150px; margin-right: 10px; float: left;}
#footer ul li a {font-size: 16px; color: #777777; font-weight: 400; margin-bottom: 5px; display: block;}
#footer ul li:first-child, #footer ul li:last-child, #footer ul li:nth-child(5) {display: none;}
#footer ul li ul li:first-child, #footer ul li ul li:last-child {display: list-item;}
#footer ul li ul li {display: list-item; list-style: none;}
#footer ul li ul li a {font-weight: 400; font-size: 14px; margin: 0;}
#footer ul li ul li a:hover {text-decoration: underline;}

#footer{color: #777777;}
#footer h3{font-size: 16px; font-weight: 400; margin-bottom: 10px;color: #777777}
#footer .footercontent img {margin-right: 10px;}
#footer .footercontent table {border-collapse: collapse;}
#footer .labels { position: absolute; right: 0; top: 120px; }
#footer .labels img {margin-right: 15px;}

#copy {width: 100%; float: left; background: #cccccc; padding: 10px 0;}
#copy span {color: #fff; font-weight: 300; float: left;}
#copy ul {float: right;}
#copy ul li{display: inline-block; margin-left: 10px;}
#copy ul li:after{content: "|"; padding-left: 10px; color: #fff; font-weight: 300;}
#copy ul li:last-child:after {content: ""; padding: 0;}
#copy ul a{color: #fff; font-weight: 300;}
#copy ul a:hover {color: #0f70a6;}

.created {margin-left: 10%;}
.created a{color: #fff;}

#main .blocks .block.html.dark.sm .slidebox h3{font-size: 16px;}

/* website fixes */

.column833 {max-width: 100% !important;}

#footer .row {margin: 0;}

#footer a[href^=mailto]{
    color:inherit;
    text-decoration:none;
}


/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1220px){
	.wrapper {width: 96%; padding: 0 2%;}
	#main .blocks .block.html  {width: 82%;}
	#main .blocks .block.html div.textbox p{font-size: 13px;}
	.block.html.formbutton a p {width: 84%;}
}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	h2 {font-size: 21px;}
	.wrapper {width: 96%; padding: 0 2%;}

	#main .blocks .block.html  {width: 77%;}
	#main .blocks .block.html .textbox {margin-top: 65px;}
	#main .blocks .block.html div.textbox p{font-size: 10px; width: 120%; margin-left: -10%;}
	#main .blocks .block.html .slidebox h3 {font-size: 16px; height: 70px;}
	#main .blocks .block.html .circle {left: 85px; top: 35px;}

	.block.html.formbutton a p {width: 77%;}

	#menu {display: none;}

	#mobile {display: block;}

	#mobile ul {display: none; position: absolute; width: 60%; right: 0; top: 59px; z-index: 999; list-style: none;}
	#mobile ul li {background: #0f70a6; width: 100%; position: relative;}
	#mobile ul li a {color: #fff; font-size: 14px !important; display: block; position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid #fff;}
	#mobile ul li a:hover {color: #000; background: #fff;}
	#mobile ul li ul {padding: 0; left: -21px; background: none; box-shadow: none; top: 10px; z-index: 999; display: none; width: 100%;}
	#mobile ul li ul li a {font-size: 14px !important;}

	#mobile div.mobileactions {float: right; margin: 13px 60px 0 0;}
	#mobile a.mobilemenu {position: absolute; right: 0; top: 8px;}
	#mobile a.mobilemenu i {font-size: 36px; padding: none; background: none; color: #0f70a6;}
	#mobile i {font-size: 22px; border-radius: 30px; background: #000; padding: 10px 12px; color: #fff; margin-right: 5px;}
	#mmenu ul { color: #0f70a6; }


	div#-_column2.column33 div.block.content {width: auto;}

	.block.list .item img {width: 100%;}
	.block.list .item p {height: auto;}

	.footermenu  {float: left; width: 75%;}
	#footer > ul > li {width: 30%;}

	div.footercontent {float: left; width: 72%; margin-top: 20px;}
	#footer .labels {top: 0;}

}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.column833 {max-width: 100%;}

	h2 {font-size: 21px;}
	.wrapper {width: 96%; padding: 0 2%;}
	.row {display: block;}


	#slider {min-height: 240px !important;}
	#slides li img {min-height: 100%;}
	#slides .slidesjs-container {min-height: 240px !important;}

	#blokken_column1.column33, #blokken_column3.column33 {width: 33% !important;}
	#blokken_column2.column34 {width: 34% !important;}

	#main .blocks .block.html  {width: 66%; background: #0f70a6;}
	#main .blocks .block.html .textbox {margin-top: 65px; display: none;}
	#main .blocks .block.html div.textbox p{font-size: 10px; width: 120%; margin-left: -10%;}
	#main .blocks .block.html .slidebox h3 {font-size: 12px; height: 52px; margin-left: -10%;}
	#main .blocks .block.html .circle {left:auto; right: -10px; top: -1px;; -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg); border-radius: 0;}

	.block.html.formbutton a p {width: 77%;}

	#header {padding: 25px 0 10px 0;}
	#header #menu > ul {width: 100%;}
	#header .search {display: none;}
	#header .phone {right: 2%;}

	#menu {display: none;}

	#mobile {display: block;}

	#mobile ul {display: none; position: absolute; width: 50%; right: 0; top: 59px; z-index: 999; list-style: none;}
	#mobile ul li {background: #0f70a6; width: 100%; position: relative;}
	#mobile ul li a {color: #fff; font-size: 14px !important; display: block; position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid #fff;}
	#mobile ul li a:hover {color: #000; background: #fff;}
	#mobile ul li ul {padding: 0; left: -21px; background: none; box-shadow: none; top: 10px; z-index: 999; display: none; width: 100%;}
	#mobile ul li ul li a {font-size: 14px !important;}

	#mmenu ul { color: #0f70a6; }

	#mobile div.mobileactions {float: right; margin: 13px 60px 0 0;}
	#mobile a.mobilemenu {position: absolute; right: 0; top: 8px;}
	#mobile a.mobilemenu i {font-size: 36px; padding: none; background: none; color: #0f70a6;}
	#mobile i {font-size: 22px; border-radius: 30px; background: #000; padding: 10px 12px; color: #fff; margin-right: 5px;}

	.column67, .column33 { width: 100% !important; float: left;}
	.column33 .block.content, .column33 .block.html.formbutton{width: 46% !important; float: left;}

	div#-_column2.column33 div.block.content {width: auto;}

	.block.list .item {width: 100%; margin-bottom: 10px;}
	.block.list .item img {width: 100%;}
	.block.list .item p {height: auto;}

	.block.list.news .item {width: 100%; margin-bottom: 10px;}

	.footermenu  {display: none;}
	#footer > ul > li {width: 30%;}
	#footer {padding: 15px 0 15px 0;}
	div.footercontent {float: left; width: 100%; margin-top: 0;}
	#footer .labels {position: relative; float: left; top: auto;}

	span.copy {width: 100%; text-align: center;}
	span.created {width: 100%; text-align: center; margin: 0;}
	#copy ul {width: 100%; text-align: center;}

	/* Fixes */

	#main .blocks .block.html.dark.sm .slidebox h3 {font-size: 13px;}

	.column33 .block.content, .column33 .block.html.formbutton {width: 100%;}
	.column33 .block.content, .column33 .block.html.formbutton p {display: flex; justify-content: flex-start;}
	.column33 .block.content, .column33 .block.html.formbutton p a {width: max-content;}

}


@media only screen and (max-width: 575px) {
	#slider img {margin-top: 0; height: 160px;}
}

/* Mobiel (Portrait)
================================================== */
@media only screen and (max-width: 479px) {
	h2 {font-size: 21px;}
	.wrapper {width: 96%; padding: 0 2%;}
	.row {display: block;}
	#header img.logo {width: 60%; margin: 10px 0 10px 0;}

	#slider {min-height: 240px !important; margin-top: 100px;}
	#slides li img {min-height: 100%;}
	#slides .slidesjs-container {min-height: 240px !important;}

	#blokken_column1.column33, 
	#blokken_column3.column33 {width: 100% !important; float: left;}
	#blokken_column2.column34 {width: 100% !important; float: left; margin: 10px 0;}

	#main .blocks #blokken_column3.column33 .dark {float: none; margin: 0 auto;}

	#main .blocks .block.html .slidebox {display: table;}

	#main .blocks .block.html {width: 80%;background: #0f70a6;margin: 0 auto;padding: 10px 20px;}
	#main .blocks .block.html .textbox {margin-top: 65px; display: none;}
	#main .blocks .block.html div.textbox p{font-size: 10px; width: 120%; margin-left: -10%; display: none;}
	#main .blocks .block.html .slidebox h3 {width: 100%; display: table-cell; vertical-align: middle; text-align: center; height: 52px;}
	#main .blocks .block.html .circle {display: none;}

	#main .breadcrumbs {display: none;}

	.block.html.formbutton a p {width: 80%; font-size: 14px;}

	#header {padding: 25px 0 10px 0; background: #fff;}
	#header #menu > ul {width: 100%;}
	#header .search {display: none;}
	#header .phone {right: 2%;}
	#header .phone span {margin: 0 5px;}

	#menu {display: none;}

	#mobile {display: block;}

	#mobile ul {display: none; position: absolute; width: 60%; right: 0; top: 59px; z-index: 999; list-style: none;}
	#mobile ul li {background: #0f70a6; width: 100%; position: relative;}
	#mobile ul li a {color: #fff; font-size: 14px !important; display: block; position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid #fff;}
	#mobile ul li a:hover {color: #000; background: #fff;}
	#mobile ul li ul {padding: 0; left: -21px; background: none; box-shadow: none; top: 10px; z-index: 999; display: none; width: 100%;}
	#mobile ul li ul li a {font-size: 14px !important;}

	#mobile div.mobileactions {float: right; margin: 13px 60px 0 0;}
	#mobile a.mobilemenu {position: absolute; right: 0; top: 8px;}
	#mobile a.mobilemenu i {font-size: 36px; padding: none; background: none; color: #0f70a6;}
	#mobile i {font-size: 22px; border-radius: 30px; background: #000; padding: 10px 12px; color: #fff; margin-right: 5px;}

	.column67, 
	.column33 { width: 100% !important; float: left;}
	.column33 .block.content, 
	.column33 .block.html.formbutton{width: 42% !important; float: left;}
	div#-_column2.column33 div.block.content {margin: 0; margin-right: 20px;}

	div#-_column2.column33 div.block.content {width: auto;}

	.block.list .item {width: 100%; margin-bottom: 10px;}
	.block.list .item img {width: 100%;}
	.block.list .item p {height: auto;}

	.footermenu  {display: none;}
	#footer > ul > li {width: 30%;}
	#footer {padding: 15px 0 15px 0;}
	div.footercontent {float: left; width: 100%; margin-top: 0; font-size: 11px;}
	div.footercontent table {width: 100% !important;}
	#footer .labels {position: relative; float: left; top: auto;}

	span.copy {width: 100%; text-align: center;}
	span.created {width: 100%; text-align: center; margin: 0;}
	#copy ul {width: 100%; text-align: center;}
		.block.list.news .item {width: 100%; margin-bottom: 10px;}
	#main .blocks .block.html .circle {width: 0;}
	#main .blocks .block.html .slidebox h3 {letter-spacing: 0;}
	#main .blocks .block.html .slidebox {position: relative;margin: 0;padding: 0;}
	#slider img {margin-top: 0; height: 200px;}

	/* Site fixes */
	.column33 .block.content, .column33 .block.html.formbutton {width: 100%;}
	.column33 .block.content, .column33 .block.html.formbutton p {display: flex; justify-content: flex-start;}
	.column33 .block.content, .column33 .block.html.formbutton p a {width: max-content;}

}