/* --- Basiseigenschappen Knop --- */
/* Button type menu */
.btn-menu {
  border-radius: 0px;
  border: 1px solid white;
  cursor: pointer;
  background: transparent;
  /*width: 48px;
  height: 48px;
  padding: 3px;
  margin: 1px;*/
  color: white;
  font-size: 28px; }

.btn {
  border: 1px solid #646464; }

.btn-close {
  position: absolute;
  top: 0;
  right: 0; }

.btn-menu-wrapper {
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 0px; }

/* Algemene instellingen voor het masker */
.btn-menu-inner {
  display: block;
  width: 120%;
  height: 120%;
  margin: 0px -2px;
  background-color: #333333;
  background-color: #FFFFFF;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity 0.2s; }

.btn-klein {
  width: 45px;
  height: 30px; }

.icon-klein {
  width: 30px;
  height: 29px;
  margin-top: -4px;
  margin-left: -5px; }

.btn-menu-inner.icon-klein2 {
  width: 35px !important;
  height: 35px !important;
  margin-top: -7px !important;
  margin-left: -5px !important; }

.btn-mini {
  width: 22px;
  height: 16px;
  border: 0px; }

.icon-mini {
  width: 14px;
  height: 18px;
  margin-top: -4px !important;
  margin-left: -7px !important;
  background-color: #717171 !important; }

/*-- De BUTTONS (Let op: GEEN spatie tussen de classes) --*/
/* algemeen */
.btn-menu-inner.algemeen {
  -webkit-mask-image: url("../pic/knop/algemeen.svg");
  mask-image: url("../pic/knop/algemeen.svg");
  margin-left: -4px;
  margin-top: -2px; }

/* at */
.btn-menu-inner.at {
  -webkit-mask-image: url("../pic/knop/at.svg");
  mask-image: url("../pic/knop/at.svg"); }

/* blader-links */
.btn-menu-inner.blader-links {
  -webkit-mask-image: url("../pic/knop/blader-links.svg");
  mask-image: url("../pic/knop/blader-links.svg"); }

/* blader-rechts */
.btn-menu-inner.blader-rechts {
  -webkit-mask-image: url("../pic/knop/blader-rechts.svg");
  mask-image: url("../pic/knop/blader-rechts.svg"); }

/* boeking-persoon */
.btn-menu-inner.boeking-persoon {
  margin-top: 3px;
  -webkit-mask-image: url("../pic/knop/boeking-persoon.svg");
  mask-image: url("../pic/knop/boeking-persoon.svg"); }

/* calculator */
.btn-menu-inner.calculator {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/calculator.svg");
  mask-image: url("../pic/knop/calculator.svg"); }

/* calendar */
.btn-menu-inner.calendar {
  -webkit-mask-image: url("../pic/knop/calendar.svg");
  mask-image: url("../pic/knop/calendar.svg"); }

/* camera */
.btn-menu-inner.camera {
  margin-top: 4px;
  -webkit-mask-image: url("../pic/knop/camera.svg");
  mask-image: url("../pic/knop/camera.svg"); }

/* cloud-naar */
.btn-menu-inner.cloud-naar {
  margin-top: 5px;
  -webkit-mask-image: url("../pic/knop/cloud-naar.svg");
  mask-image: url("../pic/knop/cloud-naar.svg"); }

/* cloud-van */
.btn-menu-inner.cloud-van {
  margin-top: 5px;
  -webkit-mask-image: url("../pic/knop/cloud-van.svg");
  mask-image: url("../pic/knop/cloud-van.svg"); }

/* copy */
.btn-menu-inner.copy {
  margin-top: 5px;
  -webkit-mask-image: url("../pic/knop/copy.svg");
  mask-image: url("../pic/knop/copy.svg");
  margin-left: -4px;
  margin-top: -2px; }

/* default */
.btn-menu-inner.default {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/default.svg");
  mask-image: url("../pic/knop/default.svg");
  margin-left: -14px;
  margin-top: -9px;
  height: 135% !important;
  width: 145% !important; }

/* diagram-project */
.btn-menu-inner.diagram-project {
  -webkit-mask-image: url("../pic/knop/diagram-project.svg");
  mask-image: url("../pic/knop/diagram-project.svg"); }

/* download */
.btn-menu-inner.download {
  -webkit-mask-image: url("../pic/knop/download.svg");
  mask-image: url("../pic/knop/download.svg"); }

/* drag-drop */
.btn-menu-inner.drag-drop {
  -webkit-mask-image: url("../pic/knop/drag-drop.svg");
  mask-image: url("../pic/knop/drag-drop.svg"); }

/* envelop */
.btn-menu-inner.envelop {
  margin-top: 4px;
  -webkit-mask-image: url("../pic/knop/envelop.svg");
  mask-image: url("../pic/knop/envelop.svg"); }

/* file-csv */
.btn-menu-inner.file-csv {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/file-csv.svg");
  mask-image: url("../pic/knop/file-csv.svg"); }

/* file-pdf */
.btn-menu-inner.file-pdf {
  margin-left: 1px;
  -webkit-mask-image: url("../pic/knop/file-pdf.svg");
  mask-image: url("../pic/knop/file-pdf.svg"); }

/* file-update */
.btn-menu-inner.file-update {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/file-update.svg");
  mask-image: url("../pic/knop/file-update.svg"); }

/* file-update2 */
.btn-menu-inner.file-update2 {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/file-update2.svg");
  mask-image: url("../pic/knop/file-update2.svg"); }

/* file */
.btn-menu-inner.file {
  margin-left: 2px;
  -webkit-mask-image: url("../pic/knop/file.svg");
  mask-image: url("../pic/knop/file.svg"); }

/* filter */
.btn-menu-inner.filter {
  -webkit-mask-image: url("../pic/knop/filter.svg");
  mask-image: url("../pic/knop/filter.svg"); }

/* flight-data */
.btn-menu-inner.flight-data {
  -webkit-mask-image: url("../pic/knop/flight-data.svg");
  mask-image: url("../pic/knop/flight-data.svg");
  margin-left: -9px;
  margin-top: -5px;
  height: 50px;
  width: 50px; }

/* flights */
.btn-menu-inner.flights {
  -webkit-mask-image: url("../pic/knop/flights.svg");
  mask-image: url("../pic/knop/flights.svg");
  margin-left: -7px;
  margin-top: -5px;
  height: 50px;
  width: 50px; }

/* genereren */
.btn-menu-inner.genereren {
  -webkit-mask-image: url("../pic/knop/genereren.svg");
  mask-image: url("../pic/knop/genereren.svg");
  margin-left: -11px;
  margin-top: -6px;
  height: 55px;
  width: 55px; }

/* gevaar */
.btn-menu-inner.gevaar {
  -webkit-mask-image: url("../pic/knop/gevaar.svg");
  mask-image: url("../pic/knop/gevaar.svg");
  margin-left: -9px;
  margin-top: -5px;
  height: 50px;
  width: 50px; }

/* golfcar */
.btn-menu-inner.golfcar {
  -webkit-mask-image: url("../pic/knop/golfcar.svg");
  mask-image: url("../pic/knop/golfcar.svg"); }

/* hangslot */
.btn-menu-inner.hangslot {
  -webkit-mask-image: url("../pic/knop/hangslot.svg");
  mask-image: url("../pic/knop/hangslot.svg"); }

/* home */
.btn-menu-inner.home {
  -webkit-mask-image: url("../pic/knop/home.svg");
  mask-image: url("../pic/knop/home.svg"); }

/* image */
.btn-menu-inner.image {
  -webkit-mask-image: url("../pic/knop/hoimageme.svg");
  mask-image: url("../pic/knop/image.svg");
  margin-left: -2px;
  margin-top: 4px; }

/* info */
.btn-menu-inner.info {
  -webkit-mask-image: url("../pic/knop/info.svg");
  mask-image: url("../pic/knop/info.svg"); }

/* klembord */
.btn-menu-inner.klembord {
  -webkit-mask-image: url("../pic/knop/klembord.svg");
  mask-image: url("../pic/knop/klembord.svg");
  margin-left: 3px;
  margin-top: 0px; }

/* klok */
.btn-menu-inner.klok {
  -webkit-mask-image: url("../pic/knop/klok.svg");
  mask-image: url("../pic/knop/klok.svg"); }

/* kruis */
.btn-menu-inner.kruis {
  -webkit-mask-image: url("../pic/knop/kruis.svg");
  mask-image: url("../pic/knop/kruis.svg"); }

/* list-num */
.btn-menu-inner.list-num {
  -webkit-mask-image: url("../pic/knop/list-num.svg");
  mask-image: url("../pic/knop/list-num.svg"); }

/* list-punt */
.btn-menu-inner.list-punt {
  -webkit-mask-image: url("../pic/knop/list-punt.svg");
  mask-image: url("../pic/knop/list-punt.svg"); }

/* list */
.btn-menu-inner.list {
  -webkit-mask-image: url("../pic/knop/list.svg");
  mask-image: url("../pic/knop/list.svg"); }

/* ingelogd */
.btn-menu.btn-ingelogd {
  background-color: #19FF18; }

/* log-in */
.btn-menu-inner.log-in {
  -webkit-mask-image: url("../pic/knop/log-in.svg");
  mask-image: url("../pic/knop/log-in.svg"); }

/* log-out */
.btn-menu-inner.log-out {
  -webkit-mask-image: url("../pic/knop/log-out.svg");
  mask-image: url("../pic/knop/log-out.svg"); }

/* menu */
.btn-menu-inner.menu {
  -webkit-mask-image: url("../pic/knop/menu.svg");
  mask-image: url("../pic/knop/menu.svg"); }

/* mypage */
.btn-menu-inner.mypage {
  -webkit-mask-image: url("../pic/knop/mypage.svg");
  mask-image: url("../pic/knop/mypage.svg"); }

/* nieuw */
.btn-menu-inner.nieuw {
  -webkit-mask-image: url("../pic/knop/nieuw.svg");
  mask-image: url("../pic/knop/nieuw.svg"); }

/* nok */
.btn-menu-inner.nok {
  -webkit-mask-image: url("../pic/knop/nok.svg");
  mask-image: url("../pic/knop/nok.svg"); }

/* ok-nok */
.btn-menu-inner.ok-nok {
  -webkit-mask-image: url("../pic/knop/ok-nok.svg");
  mask-image: url("../pic/knop/ok-nok.svg"); }

/* ok */
.btn-menu-inner.ok {
  -webkit-mask-image: url("../pic/knop/ok.svg");
  mask-image: url("../pic/knop/ok.svg");
  margin-left: 1px;
  margin-top: 3px; }

/* onderhoud */
.btn-menu-inner.onderhoud {
  -webkit-mask-image: url("../pic/knop/onderhoud.svg");
  mask-image: url("../pic/knop/onderhoud.svg");
  margin-left: -4px;
  margin-top: -2px; }

/* oog */
.btn-menu-inner.oog {
  -webkit-mask-image: url("../pic/knop/oog.svg");
  mask-image: url("../pic/knop/oog.svg");
  margin-left: 0px;
  margin-top: 7px; }

/* opnieuw */
.btn-menu-inner.opnieuw {
  -webkit-mask-image: url("../pic/knop/opnieuw.svg");
  mask-image: url("../pic/knop/opnieuw.svg"); }

/* opslaan */
.btn-menu-inner.opslaan {
  -webkit-mask-image: url("../pic/knop/opslaan.svg");
  mask-image: url("../pic/knop/opslaan.svg"); }

/* persoon */
.btn-menu-inner.persoon {
  -webkit-mask-image: url("../pic/knop/persoon.svg");
  mask-image: url("../pic/knop/persoon.svg");
  margin-left: 4px;
  margin-top: 0px; }

/* print */
.btn-menu-inner.print {
  -webkit-mask-image: url("../pic/knop/print.svg");
  mask-image: url("../pic/knop/print.svg"); }

/* printer */
.btn-menu-inner.printer {
  -webkit-mask-image: url("../pic/knop/printer.svg");
  mask-image: url("../pic/knop/printer.svg"); }

/* random */
.btn-menu-inner.random {
  -webkit-mask-image: url("../pic/knop/random.svg");
  mask-image: url("../pic/knop/random.svg"); }

/* rooster1 */
.btn-menu-inner.rooster1 {
  -webkit-mask-image: url("../pic/knop/rooster1.svg");
  mask-image: url("../pic/knop/rooster1.svg");
  margin-left: -9px;
  margin-top: -5px;
  height: 50px;
  width: 50px; }

/* rooster2 */
.btn-menu-inner.rooster2 {
  -webkit-mask-image: url("../pic/knop/rooster2.svg");
  mask-image: url("../pic/knop/rooster2.svg");
  margin-left: -9px;
  margin-top: -5px;
  height: 50px;
  width: 50px; }

/* sorteer */
.btn-menu-inner.sorteer {
  -webkit-mask-image: url("../pic/knop/sorteer.svg");
  mask-image: url("../pic/knop/sorteer.svg"); }

/* speler-aktief */
.btn-menu-inner.speler-aktief {
  -webkit-mask-image: url("../pic/knop/speler-aktief.svg");
  mask-image: url("../pic/knop/speler-aktief.svg"); }

/* speler-nonaktief */
.btn-menu-inner.speler-nonaktief {
  -webkit-mask-image: url("../pic/knop/speler-nonaktief.svg");
  mask-image: url("../pic/knop/speler-nonaktief.svg"); }

/* submit */
.btn-menu-inner.submit {
  -webkit-mask-image: url("../pic/knop/submit.svg");
  mask-image: url("../pic/knop/submit.svg"); }

/* submit1 */
.btn-menu-inner.submit1 {
  -webkit-mask-image: url("../pic/knop/submit1.svg");
  mask-image: url("../pic/knop/submit1.svg"); }

/* submit2 */
.btn-menu-inner.submit2 {
  -webkit-mask-image: url("../pic/knop/submit2.svg");
  mask-image: url("../pic/knop/submit2.svg"); }

/* submit3 */
.btn-menu-inner.submit3 {
  -webkit-mask-image: url("../pic/knop/submit3.svg");
  mask-image: url("../pic/knop/submit3.svg"); }

/* tabs */
.btn-menu-inner.tabs {
  -webkit-mask-image: url("../pic/knop/tabs.svg");
  mask-image: url("../pic/knop/tabs.svg"); }

/* tabellen */
.btn-menu-inner.tabellen {
  -webkit-mask-image: url("../pic/knop/tabellen.svg");
  mask-image: url("../pic/knop/tabellen.svg");
  margin-top: -8px; }

/* taekemabiz */
.btn-menu-inner.taekemabiz {
  -webkit-mask-image: url("../pic/knop/taekemabiz.svg");
  mask-image: url("../pic/knop/taekemabiz.svg"); }

/* terug */
.btn-menu-inner.terug {
  -webkit-mask-image: url("../pic/knop/terug.svg");
  mask-image: url("../pic/knop/terug.svg"); }

/* top */
.btn-menu-inner.top {
  -webkit-mask-image: url("../pic/knop/top.svg");
  mask-image: url("../pic/knop/top.svg"); }

/* tv */
.btn-menu-inner.tv {
  -webkit-mask-image: url("../pic/knop/tv.svg");
  mask-image: url("../pic/knop/tv.svg");
  margin-top: -2px;
  height: 23px; }

/* vlag-18h */
.btn-menu-inner.vlag-18h {
  -webkit-mask-image: url("../pic/knop/vlag-18h.svg");
  mask-image: url("../pic/knop/vlag-18h.svg"); }

/* vlag */
.btn-menu-inner.vlag {
  -webkit-mask-image: url("../pic/knop/vlag.svg");
  mask-image: url("../pic/knop/vlag.svg"); }

/* vooruit */
.btn-menu-inner.vooruit {
  -webkit-mask-image: url("../pic/knop/vooruit.svg");
  mask-image: url("../pic/knop/vooruit.svg"); }

/* vraagteken */
.btn-menu-inner.vraagteken {
  -webkit-mask-image: url("../pic/knop/vraagteken.svg");
  mask-image: url("../pic/knop/vraagteken.svg");
  margin-left: 2px;
  margin-top: 2px; }

/* vrijgeven-j */
.btn-menu-inner.vrijgeven-j {
  -webkit-mask-image: url("../pic/knop/vrijgeven-j.svg");
  mask-image: url("../pic/knop/vrijgeven-j.svg");
  margin-left: 2px;
  margin-top: 0px; }

/* vrijgeven-n */
.btn-menu-inner.vrijgeven-n {
  -webkit-mask-image: url("../pic/knop/vrijgeven-n.svg");
  mask-image: url("../pic/knop/vrijgeven-n.svg");
  margin-left: 2px;
  margin-top: 0px; }

/* vuilnisbak */
.btn-menu-inner.vuilnisbak {
  -webkit-mask-image: url("../pic/knop/vuilnisbak.svg");
  mask-image: url("../pic/knop/vuilnisbak.svg");
  height: 28px;
  margin-left: -2px;
  margin-top: 3px; }

/* weer */
.btn-menu-inner.weer {
  -webkit-mask-image: url("../pic/knop/weer.svg");
  mask-image: url("../pic/knop/weer.svg"); }

/* wijzig */
.btn-menu-inner.wijzig {
  -webkit-mask-image: url("../pic/knop/wijzig.svg");
  mask-image: url("../pic/knop/wijzig.svg"); }

/* zoek */
.btn-menu-inner.zoek {
  -webkit-mask-image: url("../pic/knop/zoek.svg");
  mask-image: url("../pic/knop/zoek.svg"); }

/*-- grote knoppen --*/
.menu-menunaam {
  font-size: 20px;
  font-style: italic;
  color: #0B70FF;
  margin-top: 5px;
  margin-bottom: 15px; }

.groteknop {
  position: relative;
  height: auto;
  float: left;
  opacity: 100%;
  text-align: center;
  margin-bottom: 0px;
  padding: 5px; }

.groteknop img {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 1px !important; }

.groteknop img:hover {
  border: 1px solid #aaa; }

/*-- --*/
.halfgroteknop {
  position: relative;
  height: auto;
  float: left;
  opacity: 100%;
  text-align: center; }

.halfgroteknop {
  background-color: #F7FCFF;
  min-height: 90px;
  margin: 0px 3px 3px 3px;
  display: block;
  border: 1px solid #ccc;
  border-right: 2px solid #AAAAAA;
  border-bottom: 2px solid #AAAAAA; }

.halfgroteknop-a {
  width: 100%;
  height: 100%;
  background-repeat: initial;
  border: none;
  display: block;
  font-size: 18px; }

.halfgroteknop:hover,
.halfgroteknop:focus,
.halfgroteknop:active {
  opacity: 80%; }