@charset "utf-8"; /********************************************** DEFAULT ITEMS / "RESET" **********************************************/ form, img { margin:0px; border:0px; } html { overflow-y:scroll; } body, html { width:100%; height:100%; margin:0px; padding:0px; -webkit-text-size-adjust:none; background-color:#f2f2f2; color:rgb(0,0,0); } body { } body, html { } body, html, input, select, textarea { font-size:14px; line-height:1.4em; font-family: 'Ubuntu', sans-serif; font-weight:400;} * { outline:none; } strong { font-weight:600; } *:first-child { margin-top:0px; } a { color:rgb(0,97,137); text-decoration:none; transition: all 300ms linear; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; } a:hover { color:rgb(0,0,0); } /********************************************** HEADS / TITLES **********************************************/ h1 { font-size:1.8em; } h2 { font-size:1.6em; } h3 { font-size:1.4em; } h4 { font-size:1.3em;} h5 { font-size:1.2em; } h6 { font-size:1.1em; } h1, h2, h3, h4, h5, h6 { line-height:1.2em; padding:0px; margin:10px 0px 5px 0px; position:relative; position:relative; font-weight:500; } .line { margin-bottom:20px; position:relative;} .line:after { content:' '; display:block; background-color:rgb(0,97,137); overflow:hidden; width:100%; height:2px; max-width:50px; position:absolute; bottom:-10px; } .line.aligncenter:after { left:50%; margin-left:-25px; } .aligncenter { text-align:center; } article h1 { font-size:1.3em; } article h2 { font-size:1.3em; } article h3 { font-size:1.2em; } article h4 { font-size:1.2em;} article h5 { font-size:1.1em; } article h6 { font-size:1.1em; } article h1, article h2, article h3, article h4, article h5, article h6 { line-height:1.2em; } /********************************************** MAIN STRUCTURE **********************************************/ #container { position:relative; z-index:2; min-height:200px;; overflow:hidden; } .center { position:relative; width:960px; margin:0px auto; } body, html{ min-height:4px; } @media (min-width: 768px) and (max-width: 1019px) { body, html{ min-height:3px; } .center { width:720px; } } @media (max-width: 767px) { body, html{ min-height:2px; } .center { width:450px; } } @media (max-width: 479px) { body, html{ min-height:1px; } .center { width:auto; min-width:240px; padding:0px 10px; } } /********************************************** HEADER **********************************************/ header { z-index:3; position:relative; } header .bars { position:absolute; width:100%; z-index:2; } html.no-slideshow header .bars { position:relative; background-color:#FFF; } #container.no-slideshow header .bars { position:relative; } #container.no-slideshow header .buttonbar { position:relative; } header .topbar { position:relative; background-color:#006189; background-color:rgba(0,97,137,1); color:#FFF; padding:5px 0px; } header .topbar .address { float:left;} header .topbar .contact { float:right;} header .topbar ul { margin:0px; padding:0px; list-style:none; } header .topbar ul li { float:left; padding:0px 10px; } header .topbar a { text-decoration:none; color:rgba(255,255,255,1);} header .topbar i { margin:0px 6px 0px 0px; width:13px; text-align:center; } header .topbar a:hover { color:rgba(255,255,255,1); } header .menubar { border-bottom:1px solid rgba(0,97,137,1); background-color:rgba(255,255,255,0.95); position:relative; } header .menubar div.logo { float:left; } header .menubar div.logo > a { display:block; } header .menubar div.logo > a > img { display:block; height:70px; width:auto; margin:25px 30px 25px 0px; } @media (min-width: 768px) and (max-width: 1019px) { header .menubar div.logo > a > img { height:45px; margin:15px 20px 15px 0px; } } @media (max-width: 767px) { header .bars { position:relative; } header .topbar .address { float:none;} header .topbar .contact { float:none;} header .topbar { padding:10px 0px 5px 0px; font-size:0.8em; line-height:1.4em; } header .topbar > .center { padding:0px; } header .menubar div.logo > a > img { height:30px; margin:10px 0px 10px 0px; } } @media (max-width: 479px) { } /********************************************** MENU **********************************************/ #menu { position:absolute; right:0px; bottom:0px; } #menu nav { } #menu .mobilemenu { display:none; } #menu .menu-0 { } #menu .menu-0 > div { } #menu .menu-0 > div > ul { margin:0px; padding:0px; list-style:none; } #menu .menu-0 > div > ul > li { float:left; position:relative; } #menu .menu-0 > div > ul > li > a { display:block; padding:15px 15px; position:relative; text-decoration:none; text-transform:uppercase; text-decoration:none; color:rgba(0,97,137,1); font-size:1.1em; } #menu .menu-0 > div > ul > li > a:after { opacity:0; display:block; position:absolute;content:' '; line-height:0px; overflow:hidden; width:0%; left:50%; margin:0px 0px; height:3px; bottom:0px; background-color:rgba(0,97,137,1); transition: all 150ms linear; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear;} #menu .menu-0 > div > ul > li.active > a:after, #menu .menu-0 > div > ul > li:hover > a:after { opacity:1; height:3px; width:100%; left:0%; } #menu .menu-1 { top:-50000px; position:absolute; min-width:100%; left:0px; margin:0px; opacity:0; margin-top:10px; transition: opacity 150ms linear, margin-top 150ms ease-in-out; -webkit-transition: opacity 150ms linear, margin-top 150ms ease-in-out; -moz-transition: opacity 150ms linear, margin-top 150ms ease-in-out; } #menu .menu-0 > div > ul > li:hover .menu-1 { opacity:1; top:inherit; margin-top:0px;} #menu .menu-1 > div { position:relative; margin:0px; overflow:hidden; } #menu .menu-1 > div > ul { position:relative; margin:0px; padding:7px 0px; list-style:none; background-color:rgba(0,97,137,1); } #menu .menu-1 > div > ul > li { position:relative; } #menu .menu-1 > div > ul > li > a { text-decoration:none; display:block; padding:3px 0px; margin:0px 15px; white-space:nowrap; margin-top:0px; color:rgba(255,255,255,0.6); } #menu .menu-1 > div > ul > li+li > a { border-top:1px dashed rgba(255,255,255,0.3);} #menu .menu-1 > div > ul > li.active > a, #menu .menu-1 > div > ul > li:hover > a { color:rgba(255,255,255,1);} #menu .menu-2 { display:none; } @media (min-width: 768px) and (max-width: 1019px) { #menu .menu-0 > div > ul > li > a { padding:11px 10px; font-size:0.9em; height:30px; line-height:30px; } } @media (max-width: 767px) { #menu { position:relative; top:inherit; right:inherit; width:auto; clear:both; background-color:transparent; float:none; } #menu > div { } #menu nav { display:block; height:0px; overflow:hidden; } #menu .arrow { display:none; } #menu .mobilemenu { display:block; position:absolute; top:-35px; right:0px; width:50px; z-index:24; height:30px; overflow:hidden; cursor:pointer; } #menu .mobilemenu > span { display:block; position:absolute; right:0px; bottom:0px; line-height:30px; height:30px; width:30px; border-radius: 2px;} #menu .mobilemenu > span > span { position:absolute; top:19px; left:18px; width:0px; height:0px; } #menu .mobilemenu > span > span > span, #menu .mobilemenu > span > span > span:before, #menu .mobilemenu > span > span > span:after { height: 3px; width: 19px; border-radius: 2px; background-color:rgb(0,97,137); position: absolute; left:0px; display: block; content: ''; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; } #menu .mobilemenu > span > span > span { top: -5px; left:-12px; } #menu .mobilemenu > span > span > span:before { top: -6px; } #menu .mobilemenu > span > span > span:after { bottom: -6px; } #menu.open .mobilemenu > span > span > span:before { top:0px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);} #menu.open .mobilemenu > span > span > span:after { bottom:0px; transform: rotate(-405deg); -webkit-transform: rotate(-405deg); -moz-transform: rotate(-405deg);} #menu.open .mobilemenu > span > span > span { background-color: transparent; } #menu .menu-0 { position:relative; overflow:hidden; padding:0px 5px; } #menu .menu-0 > div { margin:0px; padding:15px 0px; float:none; left:0px; } #menu .menu-0 > div > ul { float:none; left:0px; padding:0px; border-radius:15px; overflow:hidden; border:1px solid #CCC } #menu .menu-0 > div > ul > li { float:none; left:0px; border-top:1px solid #CCC } #menu .menu-0 > div > ul > li:first-child { background-image:none;border-top:0px;} #menu .menu-0 > div > ul > li > a { margin:0px; position:relative; z-index:2; text-align:center; padding:5px 0px; border-top:0px !important; } #menu .menu-0 > div > ul > li > a > span { padding:5px 10px;} #menu .menu-0 > div > ul > li > a > span i { display:none; } #menu .menu-0 > div > ul > li > a:after { opacity:1; height:3px; width:100%; left:0%; } #menu .menu-1 { display:block; opacity:1; top:inherit; margin-top:0px;position:relative; z-index:1; padding:0px; right:inherit; width:inherit; margin:0px; } #menu .menu-1 > div > ul { clear:both; overflow:hidden; padding:0px; text-align:center; } #menu .menu-1 > div > ul > li { display:block; } #menu .menu-1 > div > ul > li+li { margin:0px;} #menu .menu-1 > div > ul > li+li > a { border-top:0px; } #menu .menu-1 > div > ul > li > a { text-decoration:none; display:block; background-color:rgba(0,0,0,0); color:#FFF; padding:5px 10px; opacity:1; margin:0px; } #menu .menu-1 > div > ul > li.active > a, #menu .menu-1 > div > ul > li > a:hover { background-color:rgba(0,0,0,0.3);color:#FFFFFF; } #menu .menu-2 { background-color:rgba(0,0,0,0);display:block; position:relative; z-index:1; padding:0px; right:inherit; width:inherit; margin:0px; display:block; } #menu .menu-2 > div > ul { clear:both; overflow:hidden; padding:0px; text-align:center; } #menu .menu-2 > div > ul > li { display:block; } #menu .menu-2 > div > ul > li > a { background-color:rgba(255,255,255,1); color:rgba(0,0,0,0.6); padding:5px 10px; opacity:1; margin:0px; display:block; } #menu .menu-2 > div > ul > li.active > a, #menu .menu-2 > div > ul > li:hover > a { color:rgba(0,0,0,1); } #menu .menu-3 { display:none;} } /********************************************** SLIDESHOW **********************************************/ #slideshow { position:relative; height:500px; width:100%; z-index:1; overflow:hidden;} #slideshow div.slides { position:relative; height:100%; z-index:1; position:relative;} #slideshow div.slides ul { position:relative; height:100%; width:100%; margin:0px; padding:0px; list-style:none;z-index:2;} #slideshow div.slides ul li { position:absolute; width:100%; height:100%; left:0px; top:0px; opacity:0; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; } #slideshow div.slides ul li.active { position:relative; opacity:1;} #slideshow div.data { opacity:1; z-index:3; position:absolute; width:100%; height:100%; left:0%; bottom:0%; -webkit-transition: all 0.3s; transition: all 0.3s; background:url('../images/slideshow.layover.png') 0px 0px no-repeat; background-size:auto 100%; } #slideshow div.data > div { height:100%; position:relative; } #slideshow div.data ul { position:absolute; right:0px; bottom:0px; height:100%; width:100%; margin:0px; padding:0px; list-style:none; } #slideshow div.data ul li { z-index:1; position:absolute; top:0%; padding:0px; width:100%; height:100%;} #slideshow div.data ul li > div.txt { display:table; position:absolute; opacity:0; height:100%; -webkit-transition: all 1s; transition: all 1s; } #slideshow div.data ul li > div.txt > div { z-index:2; display:table-cell; vertical-align:bottom; height:100%; padding:100px 45px 120px 45px; } #slideshow div.data ul li > div.txt:after { -webkit-transition: all 1.5s; transition: all 1.5s; opacity:0; content:' '; display:block; z-index:1; position:absolute; width:200px; height:200px; bottom:-20px; left:0px; background:url('../images/beeldmerk.png') no-repeat; background-size:cover;} #slideshow div.data ul li > div.txt > div > p { text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7); display:block; font-size:1.8em; line-height:1.4em; padding:10px 0px 0px 0px; margin:0px; color:#FFFFFF; } #slideshow div.data ul li > div.txt > div > p > span { font-size:1.3em; line-height:1.3em; font-weight:700;} #slideshow div.data ul li > div.txt > div > a.button { margin:10px 0px 0px 0px; } #slideshow div.data ul li > div.txt > div > a.button:hover { } #slideshow div.data ul li.style-right > div.txt:after { background-image:url('../images/beeldmerk-rechts.png'); left:auto; right:0px;} #slideshow div.data ul li.style-center > div.txt:after { display:none; } #slideshow div.data ul li.style-center > div.txt { left:-100%; width:75%; margin-left:12.5%; text-align:center; } #slideshow div.data ul li.style-left > div.txt { left:-100%; width:75%; } #slideshow div.data ul li.style-right > div.txt { left:200%; margin-left:25%; width:75%; text-align:right; } #slideshow div.data ul li.active { z-index:2;} #slideshow div.data ul li.active > div.txt { opacity:1; left:0%; } #slideshow div.data ul li.active > div.txt:after { opacity:1; bottom:80px;} #slideshow div.arrows { position:absolute; top:0px; left:0px; width:100%; height:1%; z-index:5; display:none;} #slideshow div.arrows a { position:absolute; display:block; color:#000; text-decoration:none; padding:0px; overflow:hidden; width:50px; height:10200%; line-height:50px; font-size:0px; z-index:10; top:0%; cursor:pointer; background-color:rgba(255,255,255,0) ;} #slideshow div.arrows a span { position:relative; display:block; height:50px; line-height:50px; color:#FFF; color:rgba(255,255,255,1) ; border:1px solid #FFF; font-size:26px; text-align:center; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;} #slideshow div.arrows a:hover span { background-color:rgba(255,255,255,0.1) ; } #slideshow div.arrows a:hover { } #slideshow div.arrows a.prev { left:20px; } #slideshow div.arrows a.next { right:20px; } #slideshow div.arrows a span { top:50%; margin-top:-25px; } #slideshow div.arrows a.next span { right:0px; } #slideshow div.bullets { display:none; position:absolute; top:100%; right:10px; width:100%; height:100%; z-index:6; margin-top:-40px;} #slideshow div.bullets ul { margin:0px; padding:0px; list-style:0px; float:left; position:relative; left:50%; } #slideshow div.bullets ul li { width:16px; height:16px; border-radius:10px; background-color:rgba(255,255,255,0); text-indent:-100px; position:relative; left:-50%; overflow:hidden; float:left; postion:relative; left:-50%; margin:0px 3px; cursor:pointer; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; border:2px solid #FFF; } #slideshow div.bullets ul li.active { background-color:rgba(255,255,255,1);} @media (min-width: 768px) and (max-width: 1019px) { #slideshow { height:400px;} } @media (max-width: 767px) { #slideshow { height:150px;} #slideshow div.bullets { display:none; } #slideshow div.arrows { display:none; } #slideshow div.data ul li > div.txt:after { display:none; } #slideshow div.data ul li > div.txt > div { padding:0px 15px 20px 15px; } #slideshow div.data ul li > div.txt > div > p { font-size:1.4em; line-height:1.2em;} #slideshow div.data ul li > div.txt > div > p > span { font-size:1.4em; line-height:1.2em;} } @media (max-width: 479px) { } /********************************************** CONTENT **********************************************/ #container2 { min-height:300px; } #content { padding:20px 0px; } @media (min-width: 768px) and (max-width: 1019px) { #content {} } @media (max-width: 767px) { #content { padding:20px 10px;} } @media (max-width: 479px) { } article.medewerker { border-top:2px solid rgb(0,97,137); padding-top:20px;} article.medewerker .image > img { display: block; width:100%; border-bottom:5px solid rgb(0,97,137);} article.medewerker > .image { float:left; width:260px; } article.medewerker > .image + .text { margin-left:280px;} article.medewerker .text .image { display: none;} article.medewerker .info { } article.medewerker .info h2 { font-size:1.2em; line-height:1.2em; } article.medewerker .info em { display:block; } article.medewerker .info .linkedin { font-size:1.3em; padding:5px;} @media (max-width: 767px){ article.medewerker .image { width:160px; } article.medewerker .image + .text { margin-left:180px;} } @media (max-width: 479px) { article.medewerker .image { display:none; } article.medewerker .image + .text { margin-left:0px;} article.medewerker .text .image { display: block; width:100%; max-width:200px; position: relative;; margin:20px auto; } } article.cols { position:relative; margin:0px -15px; padding:0px;} article.cols > div { margin:0px; } article.cols > div > div { min-height:1px; float:left; position:relative; width:50%; } article.cols > div > div > div { margin:0px 15px; } @media (max-width: 767px) { article.cols > div > div { width:auto; float:none;} } /********************************************** COLUMN LAYOUT **********************************************/ .template-row { position:relative; margin:0px -10px; padding:0px;} .template-row > div { margin:0px; } .template-row > div > div { } .template-row > div > div > div { min-height:1px; float:left; position:relative; } .template-row > div > div > div > div { margin:0px 10px; } .template-row .column.floatLeft { } .template-row .column.floatRight { float:right; } .template-row .column.width20 { width:20%; } .template-row .column.width25 { width:25%; } .template-row .column.width30 { width:30%; } .template-row .column.width33 { width:33.3333%; } .template-row .column.width35 { width:35%; } .template-row .column.width40 { width:40%; } .template-row .column.width50 { width:50%; } .template-row .column.width45 { width:45%; } .template-row .column.width55 { width:55%; } .template-row .column.width60 { width:60%; } .template-row .column.width65 { width:65%; } .template-row .column.width66 { width:66.66666%; } .template-row .column.width70 { width:70%; } .template-row .column.width75 { width:75%; } .template-row .column.width80 { width:80%; } .template-row .column.width100 { width:100%; } @media (max-width: 767px) { .template-row { } .template-row .column { float:none !important; width:auto !important; } } /********************************************** HOMEPAGE **********************************************/ #homebuttons { z-index:4;} html.no-slideshow #homebuttons { z-index:2;} html.homepage div.homepage-blocks { margin:-60px -10px 10px -10px; font-size:1.1em; } html.homepage.no-slideshow div.homepage-blocks { margin-top:10px;} html.homepage div.homepage-blocks > div { position:relative; } html.homepage div.homepage-blocks > div > ul { margin:0px; padding:0px; list-style:none; } html.homepage div.homepage-blocks > div > ul > li { float:left; width:20%; position:relative; } html.homepage div.homepage-blocks > div > ul > li.clear-5 { clear:left;} html.homepage div.homepage-blocks > div > ul > li > div { margin:10px; } html.homepage div.homepage-blocks > div > ul > li > div > a { display:block; text-decoration:none; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info { padding:15px; position:relative; color:#000000; z-index:2; background-color:#FFFFFF; text-align:center; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info .image { height:100px; position:relative;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info .image img { display:block; max-height:100%; max-width:100%; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info .image img.hover { opacity:0;} html.homepage div.homepage-blocks > div > ul > li > div > a:hover > .info .image img { opacity:0;} html.homepage div.homepage-blocks > div > ul > li > div > a:hover > .info .image img.hover { opacity:1;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:1.2em; line-height: 1.3em; margin-top:5px;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 + p { margin:0px; font-size:1em; line-height:1.2em;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info { min-height:240px; } @media (min-width: 768px) and (max-width: 979px) { html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:1.1em;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 + p { font-size:0.9em; line-height:1.2em;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info { min-height:260px; } } @media (max-width: 767px) { html.homepage div.homepage-blocks { margin-top:10px; } html.homepage div.homepage-blocks > div > ul > li { width:50%; } html.homepage div.homepage-blocks > div > ul > li.clear-5 { clear:none; } html.homepage div.homepage-blocks > div > ul > li.clear-2 { clear:left; } } @media (max-width: 479px) { html.homepage div.homepage-blocks { margin-top:10px; } html.homepage div.homepage-blocks > div > ul > li { width:100%; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info { min-height:inherit; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info { border-radius:3px;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:1em; margin-top:0px; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info h3 + p { font-size:0.8em; line-height:1.2em;} html.homepage div.homepage-blocks > div > ul > li > div > a > .info .image { height:100px; width:70px; float:left; } html.homepage div.homepage-blocks > div > ul > li > div > a > .info .image + .text { margin-left:80px; } } html.no-homepage div.homepage-blocks { padding:0px 0px 10px 0px; margin:10px -10px 0px -10px; font-size:1.1em; overflow:hidden; display:block; position:relative; border-bottom:2px solid rgb(0,97,137); } html.no-homepage.no-slideshow div.homepage-blocks { margin-top:10px;} html.no-homepage div.homepage-blocks > div { position:relative; } html.no-homepage div.homepage-blocks > div > ul { margin:0px; padding:0px; list-style:none; } html.no-homepage div.homepage-blocks > div > ul > li { float:left; width:20%; position:relative; } html.no-homepage div.homepage-blocks > div > ul > li.clear-5 { clear:left;} html.no-homepage div.homepage-blocks > div > ul > li > div { margin:10px; } html.no-homepage div.homepage-blocks > div > ul > li > div > a { display:block; text-decoration:none; opacity:0.4; } html.no-homepage div.homepage-blocks > div > ul > li > div > a:hover, html.no-homepage div.homepage-blocks > div > ul > li.active > div > a { opacity:1; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info { position:relative; z-index:2; text-align:center; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image { height:100px; position:relative;} html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image img { display:none; max-height:100%; max-width:100%; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image img.hover { display:block; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:1.1em; color:#000000; margin-top:5px; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info h3 + p { display:none; } @media (min-width: 768px) and (max-width: 979px) { html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:1.1em;} } @media (max-width: 767px) { html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image { height:50px; position:relative;} html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:0.9em;} } @media (max-width: 479px) { html.no-homepage div.homepage-blocks.no-active { display:none; } html.no-homepage div.homepage-blocks { margin:-5px !important; margin-top:0px !important; padding:5px 0px 5px 0px;} html.no-homepage div.homepage-blocks > div > ul > li { width:100%; display:none; } html.no-homepage div.homepage-blocks > div > ul > li.active { display:block; } html.no-homepage div.homepage-blocks > div > ul > li > div { margin:5px; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info h3 { font-size:0.9em;} html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image { height:50px; width:50px; float:left; } html.no-homepage div.homepage-blocks > div > ul > li > div > a > .info .image + .text { margin-left:40px; } } #homebuttons2 { position:relative; padding-bottom:30px; } div.homepage-blocks2 { margin:-10px; font-size:1.1em; } div.homepage-blocks2 > div { position:relative; } div.homepage-blocks2 > div > ul { margin:0px; padding:0px; list-style:none; } div.homepage-blocks2 > div > ul > li { float:left; width:25%; position:relative; } div.homepage-blocks2 > div > ul > li.clear-4 { clear:left;} div.homepage-blocks2 > div > ul > li > div { margin:10px; } div.homepage-blocks2 > div > ul > li > div > a { display:block; text-decoration:none; } div.homepage-blocks2 > div > ul > li > div > a > .info { padding:0px; position:relative; color:#000000; z-index:2; } div.homepage-blocks2 > div > ul > li > div > a > .info strong { display:block; padding:4px 0px 10px 0px; } div.homepage-blocks2 > div > ul > li > div > a > .info strong i { color:rgb(0,97,137); width:15px; } div.homepage-blocks2 > div > ul > li > div > a > .info strong i.hover { display:none; } div.homepage-blocks2 > div > ul > li.active > div > a > .info strong i.hover, div.homepage-blocks2 > div > ul > li > div > a:hover > .info strong i.hover { display:inline-block; } div.homepage-blocks2 > div > ul > li.active > div > a > .info strong i, div.homepage-blocks2 > div > ul > li > div > a:hover > .info strong i { display:none; } div.homepage-blocks2 > div > ul > li > div > a > .info strong + p { margin:0px; font-size:1em; line-height:1.2em;} @media (min-width: 768px) and (max-width: 979px) { div.homepage-blocks2 > div > ul > li { width:50%; } div.homepage-blocks2 > div > ul > li.clear-2 { clear:left; } } @media (max-width: 767px) { div.homepage-blocks2 > div > ul > li { width:50%; } div.homepage-blocks2 > div > ul > li.clear-2 { clear:left; } div.homepage-blocks2 > div > ul > li > div > a > .info strong + p { margin:0px; font-size:0.85em; line-height:1.2em;} } @media (max-width: 479px) { div.homepage-blocks2 > div > ul > li { width:100%; } } html.no-homepage #homebuttons2 { background-color:#7fb0c4; margin-top:20px; padding-top:30px; padding-bottom:40px; } html.no-homepage div.homepage-blocks2 > div > ul > li > div > a > .info strong i { color:#FFF; } html.no-homepage #homebuttons2 .line:after { background-color:#FFF; } /********************************************** SIDEMENU **********************************************/ .area.sidemenu .menu-0 > div > ul { margin:0px; padding:0px; list-style:none; } .area.sidemenu .menu-0 > div > ul > li > a { color:rgb(0,0,0); font-weight:500; font-size:1.1em; line-height:1.3em; } .area.sidemenu .menu-0 > div > ul > li > a > span > i { width:25px;color:rgb(0,97,137); } .area.sidemenu .menu-0 > div > ul > li > a > span > i.hover { display:none; } .area.sidemenu .menu-0 > div > ul > li.active > a > span > i, .area.sidemenu .menu-0 > div > ul > li > a:hover > span > i { display:none; } .area.sidemenu .menu-0 > div > ul > li.active > a > span > i.hover, .area.sidemenu .menu-0 > div > ul > li > a:hover > span > i.hover { display:inline-block; } .area.sidemenu .afspraakbutton { padding:20px 0px 0px 0px; } /********************************************** MEDEWERKERS **********************************************/ .medewerkers { position:relative; margin:-10px; z-index:10; } .medewerkers > div { position:relative;} .medewerkers > div > ul { margin:0px; padding:0px; list-style:none;} .medewerkers > div > ul li { width:25%; float:left; } .medewerkers > div > ul li.break-4 { clear:left; } .medewerkers > div > ul li > div { display:block; margin:20px; } .medewerkers > div > ul li .image { display:block; position:relative; } .medewerkers > div > ul li .image > img { display:block; width:100%; height:auto; position:relative; z-index:1; border-bottom:5px solid rgb(0,97,137);} .medewerkers > div > ul li a.image:hover > img { opacity:1; border-bottom-color:#000;} .medewerkers > div > ul li.active a.image > img { opacity:1;} .medewerkers > div > ul li .info { text-align:center; padding:10px 0px;} .medewerkers > div > ul li .info > a > h2 { font-size:1.2em; line-height:1.2em; } .medewerkers > div > ul li .info > a > em { display:block; } .medewerkers > div > ul li .info > .linkedin { font-size:1.4em; padding:5px;} @media (min-width: 768px) and (max-width: 979px) { .medewerkers > div > ul li .info > a > h2 { font-size:1em; line-height:1.2em; } .medewerkers > div > ul li .info > a > em { font-size:0.8em; line-height:1.2em; } } @media (max-width: 767px) { .medewerkers { margin:0px; padding-bottom:10px;} .medewerkers > div > ul li > div { margin:10px; } .medewerkers > div > ul li { width:50%; } .medewerkers > div > ul li.break-2 { clear:left; } .medewerkers.active > div > ul li { width:100%; } .medewerkers.active > div > ul li > div { margin:0px; } .medewerkers.active > div > ul li { display:none; } .medewerkers.active > div > ul li .image { display:block; width:160px; float:left; } .medewerkers.active > div > ul li .info { display:block; padding:0px 0px; margin-left:170px;} .medewerkers.active > div > ul li.active { display:block; } } @media (max-width: 479px) { .medewerkers.active > div > ul li .image { width:140px; } .medewerkers.active > div > ul li .info { margin-left:146px;} } /********************************************** HOMEPAGE NEWS **********************************************/ #news { margin:10px -10px; } #news ul { margin:0px; padding:0px; list-style:none; } #news ul li { float:left; width:50%; } #news ul li a { display:block; text-decoration:none; color:(0,97,137); margin:0px 10px; border-top:1px dotted (0,97,137); padding:10px 0px; } #news ul li a .image img { display:block; width:100%; height:auto; } #news ul li a .image { width:100px; float:left; } #news ul li a .image + div { margin-left:120px;} #news ul li a strong { display:block; font-size:1.2em; line-height:1.2em; margin:0px; } #news ul li a span.date { color:(0,97,137); padding-top:3px; font-weight:300; font-style:italic;} #news ul li a p { margin:0px; padding:5px 0px 0px 0px; color:rgb(0,0,0) } #news ul li a:hover p { color:(0,97,137);} @media (max-width: 767px) { #news ul li { float:none; width:100%; } } .sidepic { border:4px solid (0,97,137); padding:4px; } .sidepic img { display:block; width:100%; height:auto; } /********************************************** OMGEVING MAPS **********************************************/ #mapsbar { position:relative; z-index:10; background-color:#efefef;} #mapsbar > .map { position:relative; } #mapsbar > .map > div.padding { width:100%; height:400px; z-index:1; visibility:hidden; } #mapsbar > .map > div.maps { position:absolute; top:0px; left:0px; width:100%; height:100%;} #mapsbar > .list { display:none} #mapsbar > .info { position:absolute; left:0px; top:0px; width:0px; height:0px; opacity:0;} #mapsbar > .info > div { position:absolute; bottom:10px; width:290px; left:-145px;} #mapsbar > .info > div > div { padding: 10px 15px; background-color:#80888e; color:#FFF; border-radius:4px; } #mapsbar > .info > div > div > strong { font-weight:600; font-size:1.4em; padding:4px 0px; display:block; } #mapsbar > .info > div > div > p { margin:0px 0px 10px 0px; font-size:0.9em; line-height:1.2em; } #mapsbar > .info > div > div > a.more { display:block; color:#FFF; text-decoration:underline; } #mapsbar > .info > div > div > a.close { position:absolute; cursor:pointer; top:0px; right:0px; display:block; width:30px; height:30px; color:#fff; font-size:20px; line-height:30px; text-align:center; } @media (max-width: 767px) { } /********************************************** CONTACTFORM **********************************************/ #form { padding:15px; background-color:#ecedee; border-radius:4px; } #form .inputfield { width: 100%; height:100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; border:0px solid #dbdedf; background-color:#dbdedf; color:#000; margin:0px; font-size:1em; line-height:1.7em; padding:3px; margin-bottom:5px; } #form .errors, #form .success { padding:15px 15px 15px 15px; margin-bottom:10px; color:#FFFFFF; background:rgb(0,97,137); border-radius:4px; } #form .success *, #form .errors * { color:#FFFFFF; } #form form { margin:0px; position:relative; } #form div.row { margin:0px; position:relative; padding:1px 0px; clear:both; } #form div.row > div > label { display:block; float:left; width:100px; padding-top:8px; } #form div.row > div > label + div { margin-left:110px; } #form div.row > div > label + div.checkbox > div { padding:2px 0px; } #form div.row > div > label + div.checkbox input { float:left; } #form div.row > div > label + div.checkbox input + label { display:block; margin-left:30px; cursor:pointer; } #form div.row > div > label + div.radio > div { float:left; padding:5px 0px; } #form div.row > div > label + div.radio input { float:left; } #form div.row > div > label + div.radio input + label { display:block; margin:0px 10px 0px 30px; cursor:pointer; } #form textarea.inputfield { overflow:auto; height:100px; padding:5px; } #form .captcha .inputfield { width:70px; } #form img.captcha { vertical-align:top; cursor:pointer; } #form img.captcharefresh { vertical-align:middle; cursor:pointer; } #form .verplicht { display:block; padding:5px 0px 10px 0px; } #form .verplicht, #form .submit { margin-left:110px;} @media (max-width: 1019px) { #form div.row > div > label { float:none; width:inherit; padding:5px 0px 5px 0px;} #form div.row > div > label + div, #form .verplicht, #form .submit { margin-left:0px;} } /****************************** ROUTE ******************************/ #route { margin:0px;} #route .adressen { margin:-5px; display:none; } #route .adressen ul { margin:0px; padding:0px; list-style:none; position:relative; } #route .adressen li { float:left; width:50%; cursor:pointer; } #route .adressen li.break-2 { clear:left; } #route .adressen li > div { margin:5px; border:1px solid #dedede; padding:10px; } #route .adressen li.active > div { background-color:#009ee0; color:#FFF; } #route .form .inputfield { width: 100%; height:100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; border:0px solid #CCC; background-color:#e3e3e3; margin:0px; font-size:1em; line-height:1.7em; padding:3px 5px; margin:4px 0px; } #route .map { clear:left; height:280px; margin:10px 0px 30px 0px; border:1px solid #dedede; } #route input[type=submit] { float:right; margin:10px 0px; } #route .doel { display:none;} #route .postcode { width:60px;} #route .form strong { display:block; font-weight:400; } #routedirections { margin-top:20px; display:none; } #routedirections .directions { padding:10px 0px;} #routedirections .adp, #routedirections .adp table { font-size:13px; line-height:1.4em; } #routedirections .adp-placemark { background-color:rgb(0,97,137); border:0px; border-radius:10px; color:#FFFFFF; } #routedirections .adp-placemark * { color:#FFFFFF;} .area.adres { border-bottom:1px dotted (0,97,137); padding-bottom:15px; } /****************************** CLEARFIX ******************************/ .toolboximage.right, .toolboximage.left, .template-row, .clearfix { *zoom: 1; } .toolboximage.right:before, .toolboximage.left:before, .template-row:before, .clearfix:before, .toolboximage.right:after, .toolboximage.left:after, .template-row:after, .clearfix:after { display: table; line-height: 0; content: ""; } .toolboximage.right:after, .toolboximage.left:after, .template-row:after, .clearfix:after { clear: both; } span.button, input.button, a.button, p.button a { display:inline-block; position:relative; text-decoration:none; padding:10px 25px; cursor:pointer; text-align:center; -webkit-appearance: none; white-space: normal; border:0px; border-radius:18px; background-color:rgb(0,97,137); color:#FFFFFF; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; } span.button:hover, input.button:hover, a.button:hover, p.button a:hover { background-color:rgb(0,0,0);} .button.small { padding:4px 10px; font-size:0.9em; } /********************************************** FOOTER **********************************************/ footer { background-color:#006189; background-color:rgba(0,97,137,1); color:#FFF; position:relative; z-index:3; overflow:hidden; padding:20px 0px 40px 0px; } footer h1, footer h2, footer h3, footer h4 { color:#FFFFFF; } footer .line:after { background-color:#FFFFFF;} footer a { color:rgba(255,255,255,0.4);} footer a:hover { color:rgba(255,255,255,1);} footer .center { min-height:180px;} footer .center > div { margin:10px -15px; } footer .center > div > div { position:relative; } footer .center > div > div > div { float:left; width:33.3333%; } footer .center > div > div > div > div { margin:0px 15px; padding:0px } footer .center > div > div > div:first-child + div p { margin-left:20px; position:relative;} footer .center > div > div > div:first-child + div p i { position:absolute; left:-20px; margin-top:3px;} footer .center > div > div > div:first-child + div + div p { margin-left:20px; position:relative;} footer .center > div > div > div:first-child + div + div p i { position:absolute; left:-20px; margin-top:3px;} @media (max-width: 767px) { footer .center > div > div > div { float:none; width:inherit; } footer .center > div > div > div { margin:20px;} } @media (max-width: 479px) { footer .center > div { margin:10px 0px; } footer .center > div > div > div { margin:20px 0px;} } footer .smicons > ul { margin:0px -3px; padding:0px; list-style:none; } footer .smicons > ul > li { float:left; margin:5px 3px; } footer .smicons > ul > li > a { display:block; cursor:pointer; background-color:rgba(255,255,255,0.8); color:#006189; width:40px; height:40px; line-height:40px; text-align:center; font-size:22px; border-radius:20px; -webkit-transition: all 300ms; -moz-transition: all 300ms;} footer .smicons > ul > li > a:hover { background-color:rgba(255,255,255,1);} /********************************************** CONTACT FOOTER **********************************************/ #contactfooter { background-color:#006189; background-color:rgba(0,97,137,1); color:#FFF; margin:20px 0px; } #contactfooter .line { color:#FFF; font-size:1.8em; font-weight:700; } #contactfooter .line:after { background-color:#FFF; } #contactfooter > div { padding-top:20px; padding-bottom:20px; } #contactfooter > div > div:first-child { width:60%; float:left; } #contactfooter > div > div:first-child + div { width:40%; float:right; } #contactfooter p.button a { background-color:#FFF; color:#006189; } @media (max-width: 767px) { #contactfooter > div > div:first-child { width:auto; float:none; } #contactfooter > div > div:first-child + div { width:auto; float:none; } } /********************************************** NEWS FOOTER **********************************************/ #newsfooter { } #newsfooter > div { margin:20px -15px; } #newsfooter > div > div { position:relative; } #newsfooter > div > div > div { float:left; width:50%; } #newsfooter > div > div > div > div { margin:0px 15px; padding:0px; position:relative; } #newsfooter > div > div > div:first-child + div ul { margin:0px; padding:0px; list-style:none; } #newsfooter > div > div > div:first-child + div + div p { margin-left:20px; position:relative;} #newsfooter > div > div > div:first-child + div + div p i { position:absolute; left:-20px; margin-top:3px;} @media (max-width: 767px) { #newsfooter > div > div > div { float:none; width:inherit; } } @media (max-width: 479px) { } /********************************************** FOOTER NEWS **********************************************/ #hompage-news ul { margin:0px; padding:0px; list-style:none; } #hompage-news ul li { border-top:2px dotted rgb(0,97,137); padding:10px 0px; } #hompage-news ul li:first-child { border-top:0px; } #hompage-news ul li > em { display:block; padding:0px 0px 0px 0px; } #hompage-news ul li a { display:block; text-decoration:none; color:#000;} #hompage-news ul li a .image img { display:block; width:100%; height:auto; } #hompage-news ul li a .image { width:100px; float:left; } #hompage-news ul li a .image + div { margin-left:120px;} #hompage-news ul li a strong { display:block; font-size:1.2em; line-height:1.2em; margin:0px; color:rgb(0,97,137); } #hompage-news ul li a span.date { color:(0,97,137); padding-top:3px; font-weight:400; font-style:italic;} #hompage-news ul li a p { margin:0px; padding:5px 0px 0px 0px; } #hompage-news ul li a:hover p { } #hompage-news.small ul li a .image { width:inherit; float:none; margin:0px 0px 10px 0px; border-top:10px solid rgb(0,97,137); } #hompage-news.small ul li a .image + div { margin-left:0px;} #hompage-news.small ul li a > div > em { display:block; padding-top:2px; font-weight:500; color:rgb(0,97,137); text-align:right; } /********************************************** SOCIAL MEDIA **********************************************/ #newsfooter .smicons { float:right; position:relative; z-index:10; } #newsfooter .smicons > ul { margin:0px -3px; padding:0px; list-style:none; } #newsfooter .smicons > ul > li { float:left; margin:5px 3px; } #newsfooter .smicons > ul > li > a { display:block; cursor:pointer; background-color:rgb(0,97,137); color:rgb(255,255,255); width:22px; height:22px; line-height:22px; text-align:center; font-size:12px; -webkit-transition: all 300ms; -moz-transition: all 300ms;} #newsfooter .smicons > ul > li > a:hover { background-color:rgb(0,97,137));} .socialmediaticker { margin:0px 0px 0px 0px; } .socialmediaticker > div .gradient { position:absolute; height:25px; bottom:0px; left:0px; width:100%; z-index:5;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50&0+1,1+50,1+50 */ background: -moz-linear-gradient(top, rgba(242,242,242,0) 0%, rgba(242,242,242,0) 1%, rgba(242,242,242,1) 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,0)), color-stop(1%,rgba(242,242,242,0)), color-stop(50%,rgba(242,242,242,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,0) 1%,rgba(242,242,242,1) 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,0) 1%,rgba(242,242,242,1) 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,0) 1%,rgba(242,242,242,1) 50%); /* IE10+ */ background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,0) 1%,rgba(242,242,242,1) 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */ } .socialmediaticker > div .posts { height:450px; overflow:hidden; position:relative; z-index:1; clear:both; } .socialmediaticker > div .posts ul { margin:0px; padding:0px; list-style:none;} .socialmediaticker > div .posts ul li { clear:both; padding:8px 0px; border-bottom:2px dotted rgb(0,97,137);} .socialmediaticker > div .posts ul .image { float:left; width:30%; } .socialmediaticker > div .posts ul .image img { width:100%; height:auto; } .socialmediaticker > div .posts ul .image + .text { margin-left:30%; padding-left:10px;} .socialmediaticker > div .posts ul em { display:block; line-height:12px; } .socialmediaticker > div .posts ul em > i { padding-right:3px; color:(0,97,137); font-size:14px; vertical-align:bottom; line-height:12px; } .socialmediaticker > div .posts ul strong { display:block; padding:4px 0px 0px 0px;} .socialmediaticker > div .posts ul strong > a { } .socialmediaticker > div .posts ul p { display:none; margin:5px 0px 0px 0px; line-height:1.2em; overflow:hidden; } .socialmediaticker > div .posts ul em + p { display:block;} @media (max-width: 767px) { .socialmediaticker > div { } .socialmediaticker > div { margin:0px; } .socialmediaticker > div > div > div { float:none; width:inherit; } .socialmediaticker > div > div > div > div { margin:0px; } } /********************************************** IMAGES VANUIT TOOLBOX **********************************************/ .toolboximage { margin:5px 0px; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; } .toolboximage.border { border:5px solid rgb(0,97,137); } .toolboximage.borderbottom { border-bottom:10px solid rgb(0,97,137);} .toolboximage.noalign { } .toolboximage.left { clear:left; float:left; margin-top:0px; margin-right:15px; margin-bottom:8px; } .toolboximage.right { clear:right; float:right; margin-top:0px; margin-left:15px; margin-bottom:8px; } .toolboximage.zoom, .toolboximage.groot { width:100%; height:auto;} .toolboximage.normal { width:50%; height:auto;} .toolboximage.klein { width:33.333%; height:auto;} @media (max-width: 767px) { .toolboximage.normal { width:100%; height:auto;} .toolboximage.klein { width:50%; height:auto;} } @media (max-width: 479px) { .toolboximage.normal { width:100%; height:auto;} .toolboximage.klein { width:100%; height:auto;} }