@import url(https://fonts.googleapis.com/css?family=Gabriela|Dosis:200);

body {
 margin: 0;
}


#output {
  position: absolute;
  height: 100%;
  width: 100%;
}

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*
    betere manier om te centeren?:
    https://stackoverflow.com/a/27614179/1227852
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;*/
}
#container p {
  font-smoothing: subpixel-antialiased;
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25em 0;
  letter-spacing: 2px;
  font-weight: 200;
  font-size: 4vw;
  width: 100%;
  opacity: 0.6;
  color: #FFF;
  display: inline;
}
#container p.boldie {
  font-weight: bold;
  opacity: 0.9;
  margin-right: 2vw;
}

.links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.links li {
  display: inline-block;
}
.links li a {
  transition: opacity 0.2s ease-out;
  margin: 2vw 0.75vw 1vw;
  display: block;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 100%;
  background-color: #fff;
  background-repeat: no-repeat;
  opacity: 0.3;
}
.links li a:hover {
  opacity: 0.7;
}
#bank {
  background-image: url('../img/bank.png');
  background-position: 50%;
  background-size: 50% 50%;
}
#tax {
  background-image: url('../img/tax.png');
  background-position: 50%;
  background-size: 85% 85%;
}
#kvk {
  background-image: url('../img/kvk.png');
  background-position: 70% 80%;
  background-size: 75% 75%;
}
#mail {
  background-image: url('../img/email.png');
  background-position: 50%;
  background-size: 50% 50%;
}

.link-content {
  transition: opacity 0.2s ease-out;
  width: 100%;
  height: 100%;  
}

ul a.selected {
  opacity: 0.9;
}

#bubble {
  text-align: center;
  line-height: 5vw;
  width: 100%;
  height: 5vw;
}

#container p#bubble-text {
  visibility: hidden;
  font-size: 2vw;
}


#bubble.kvk {
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 1vw;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;

  border-radius: 1vw;
  background: black;
  height: 5vw;
  position: relative;
  opacity: 0.5;
}
#bubble.kvk:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 17%;
  width: 0;
  margin-top: -0.9vw;
  border-bottom: 1vw solid black;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}


#bubble.tax {
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 1vw;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;

  border-radius: 1vw;
  background: black;
  height: 5vw;
  position: relative;
  opacity: 0.5;
}
#bubble.tax:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 37%;
  width: 0;
  margin-top: -0.9vw;
  border-bottom: 1vw solid black;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}


#bubble.bank {
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 1vw;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;

  border-radius: 1vw;
  background: black;
  height: 5vw;
  position: relative;
  opacity: 0.5;
}
#bubble.bank:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 57%;
  width: 0;
  margin-top: -0.9vw;
  border-bottom: 1vw solid black;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}


#bubble.mail {
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 1vw;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;

  border-radius: 1vw;
  background: black;
  height: 5vw;
  position: relative;
  opacity: 0.5;
}
#bubble.mail:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 76%;
  width: 0;
  margin-top: -0.9vw;
  border-bottom: 1vw solid black;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}