*{
  padding:0;
  margin:0;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
}

body{
  background:rgb(254,254,254);
}

body>header{
  width:100vw;
  height:100vh;
  /* padding-left: 10vw; */
  /* padding-top:70vh; */
  background:#f2f2f2;
  background: black;
  background-image: url("https://www.locaties.nl/Uploads/Cache/Files/180405093152.Haagse-Toren-The-Penthouse-1.resized.1280x0.jpg");
  /* background-repeat: no-repeat; */
  color:black;
}

body>header>#introblock{
  position: absolute;
  /* bottom:10vw; */
  left:10vw;
  padding:2vw;
  background:rgba(57, 162, 255, 0.5);
  background:white;
  color:black;
  width:33vw;
  border-radius:0.6vw;
}

@media only screen and (min-width: 601px) {
  body>header>#introblock{
    bottom:10vw;  
  }

  
body>header>#introblock>#intro{
  font-size: 2vw;
}

body>header>#introblock>#name{
  font-size: 3vw;
}
body>header>#introblock>#massage{
  font-size:1.5vw;
}

}


  


/* @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah); */
body>header>#first-pi{
  position: absolute;
  top:10vw;
  left:50vw;  
}
.post-it {
background:#fefabc; 
padding:2vw; 
font-family: "Comic Sans MS", cursive, sans-serif;
/* font-family: 'Gloria Hallelujah', cursive;  */
font-size:2vw; 
color: #000; 
width:24vw; 
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(-7deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
}


@media only screen and (max-width: 601px) {
  body>header>#introblock>#intro{
    font-size: 3vw;
  }
  
  body>header>#introblock>#name{
    font-size: 4vw;
  }
  body>header>#introblock>#massage{
    font-size:3vw;
  }

  body>header>#introblock{
    top:10vw;
    width:80vw;
  }

  body>header>#first-pi{
    position: absolute;
    top:40vw;
    left:50vw;  
  }
}

.post-it>ul{
  list-style-type: circle;
}



section.ulist{
  position:relative;
  background-image: url('../img/bg2.png');
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section.ulist>img{
  width:10vw;
  position:absolute;
  top:2vw;
  right:2vw;
  transform:rotate(-45deg);
  /* animation: rotate 2s infinite linear; */
}

section.ulist>img.heartbeat{
  animation: heartbeat 2s infinite linear;
}
#piece{
  animation:heartbeat 2s infinite linear;
}

section.ulist>header{
  font-size: 5vw;
  border-style: solid;
  border-width: 0.5vw 0 0.5vw 0vw;
  text-align: left;
  padding: 2vw;
  text-decoration: underline;
  /* background:green; */
  background:#123456;
  /* background:rgba(3,3,2,0.51); */
  color:white;
  /* width:10vw; */
  /* margin:2vw; */
  margin-bottom: 2vw;
}
section.ulist>ul{
  text-align: left;
  /* background:aqua; */
}

section.ulist>ul>li:first-child{
  border-style: solid;
  border-width: 0.2vw 0vw 0.2vw 0vw;
}
section.ulist>ul>li{
  border-style: solid;
  border-width: 0vw 0vw 0.2vw 0vw;
  padding: 5vw;
  /* margin-left:5vw; */
}
section.ulist>ul>li:nth-child(even){
  background:rgba(0,0,0,0.05);
}
section.ulist>ul>li>h3{
  font-size: 3vw;
}
section.ulist>ul>li>p{
  font-size: 3vw;
}

section.ulist>ul>li.ads{
  background:rgb(242,242,242);
  padding-left:30vw;
  color:black;
}
section.ulist>ul>li.ads a{
  color:black;
}

#liefdesblind p{
  line-height: 6vw;
  text-align: justify;
}

@keyframes rotate{
  0%    { transform: rotate(-45deg); }
  100%  { transform: rotate(315deg);}
}
@keyframes heartbeat{
  0%    { transform: scale(1); }
  10%   {transform:scale(0.8);}
  20%   {transform:scale(1);}  
  30%    { transform: scale(1); }
  40%   {transform:scale(0.8);}
  50%   {transform:scale(1);}  
  100%  { transform: scale(1);}
}
















.numpad-container {
  position: fixed;
  z-index:20;
  /* top:0; */
  top:50vw;
  right:20em;
  width:10px;
  height:20px;
  display: grid;
  grid-template-columns: 5em 5em 5em 5em;
  /* margin: auto; */
  opacity: 1;
  /* border:1px solid black; */
}

.numpad-container>div:hover{
  background:rgba(0,0,0,0.05);
}
.numpad-container>div{
  border-radius: 3px;
  background:rgba(214, 84, 84, 0.00);
  color:black;
}

.numpad-container>div#plus{
  background:rgba(57, 162, 255, 1) !important;
}

.numpad-container > div:nth-child(odd) {
  /* width:5em;height:5em; */
  /* text-align: center; */
  /* animation: fadeInOdd 2s; */
  /* transition: all 0.2s; */
  /* background:url("img/item1.jpg"); */
  /* background-color:#f2f2f2; */
}

.numpad-container > div:nth-child(even) {
  /* width:5em;height:5em; */
  /* text-align: center; */
  /* animation: fadeInEven 1s; */
  /* transition: all 0.2s; */
  /* background-color:#f2f2f2; */
}

.numpad-container > div.click{
  /* background-color:#123456; */
  /* background: url("img/item2.jpg") */
}


@keyframes fadeInEven{
  0%{
      margin:-1000px;
      background-color: rgba(0,0,0,1);
  }
  100%{
      margin:0;
      background-color: #f2f2f2;
  }
}


@keyframes fadeInOdd{
    0%{
        margin:300px;
        background-color: rgba(0,0,0,1);
    }
    100%{
        margin:0;
        background-color: #f2f2f2;
    }
}

@keyframes fadeInClick{
  0%{
      background-color: #f2f2f2;
  }
  100%{
      background-color: rgba(0,0,0,1);;
  }
}

.numpad-container > div:nth-child(0){
  height:11em;
  grid-column: 4;
  grid-row:2/4;
}

.numpad-container > div:nth-child(8){
  height:11em;
  grid-column: 4;
  grid-row:2/4;
}

.numpad-container > div:nth-child(15){
  height:11em;
  grid-column: 4;
  grid-row:4/6;
}

.numpad-container > div:nth-child(16){
    width:11em;
    grid-column:1/3;
}