/* Kerstverlichting */
.kerstverlichting .in-out-btn {
  color: #fff;
}
.kerstverlichting .in-out-btn:hover,
.kerstverlichting .in-out-btn:active,
.kerstverlichting .in-out-btn.active {
 background: #027462;
}
.kerstverlichting .kerst-ani {
  height: 350px;
  background-color: #19caaf;
  display: none;
}
.kerstverlichting .kerst-ani.active {
  display: block;
}
.kerstverlichting .kerst-ani.binnen {
  background-image: url(../img/kerstverlichting-binnen-bg.png);
  background-position: left top;
  background-repeat: repeat-x;
}
.kerstverlichting .kerst-ani.buiten {
  background-image: url(../img/kerstverlichting-buiten-bg.png);
  background-position: left bottom;
  background-repeat: no-repeat;
}
.kerstverlichting .kerst-ani .menu {
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(0,0,0,0.65);
  width: 204px;
}
.kerstverlichting .kerst-ani .menu a {
  color: #fff;
  line-height: 30px;
  border-bottom: 1px solid #fff;
}
.kerstverlichting .kerst-ani .content {
  right: 0;
  top: 0;
  height: 100%;
  width: 936px;
}
.kerstverlichting .kerst-ani .binnen1 {
  right: 270px;
  top: 0;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .binnen2 {
  right: 140px;
  bottom: 40px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .binnen3 {
  left: 40px;
  bottom: 10px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .binnen4 {
  left: 360px;
  top: 112px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .binnen5 {
  left: 340px;
  top: 70px;
  z-index: 1;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .binnen6 {
  left: 380px;
  top: 40px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten1 {
  right: 90px;
  top: 170px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten2 {
  left: 363px;
  top: 167px;
  z-index: 1;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten3 {
  left: 255px;
  top: 12px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten4 {
  right: 290px;
  bottom: 69px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten5 {
  right: 40px;
  bottom: 60px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten6 {
  left: 150px;
  bottom: 5px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten7 {
  left: 450px;
  bottom: 10px;
  z-index: 0;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .buiten8 {
  left: 392px;
  bottom: 63px;
  z-index: 1;
  cursor: pointer;
}
.kerstverlichting .kerst-ani .overlay {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
  background: rgba(0,0,0,0.65);
  z-index: 2;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  pointer-events: none;
}
.kerstverlichting .kerst-ani .horz-line {
  height: 1px;
  display: block;
  line-height: 1px;
  background: #fff;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.kerstverlichting .kerst-ani .vert-line {
  width: 1px;
  display: block;
  background: #fff;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.kerstverlichting .kerst-ani .circle {
  height: 5px;
  width: 5px;
  display: block;
  background: #fff;
  border-radius: 50%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.kerstverlichting #binnen2 .horz-line {
  opacity: 1;
  width: 735px;
  left: -15px;
  top: 45px;
}
.kerstverlichting #binnen2 .vert-line {
  opacity: 1;
  height: 50px;
  left: 720px;
  top: 45px;
}
.kerstverlichting #binnen2 .circle {
  left: 718px;
  top: 92px;
  opacity: 1;
}
.kerstverlichting #binnen3 .horz-line {
  opacity: 1;
  width: 147px;
  left: -15px;
  top: 76px;
}
.kerstverlichting #binnen3 .circle {
  left: 130px;
  top: 74px;
  opacity: 1;
}
.kerstverlichting #binnen4 .horz-line {
  opacity: 1;
  width: 479px;
  left: -15px;
  top: 107px;
}
.kerstverlichting #binnen4 .vert-line {
  opacity: 1;
  height: 20px;
  left: 464px;
  top: 107px;
}
.kerstverlichting #binnen4 .circle {
  left: 462px;
  top: 125px;
  opacity: 1;
}
.kerstverlichting #binnen6 .horz-line {
  opacity: 1;
  width: 449px;
  left: -15px;
  top: 138px;
}
.kerstverlichting #binnen6 .vert-line {
  opacity: 1;
  height: 72px;
  left: 434px;
  top: 67px;
}
.kerstverlichting #binnen6 .circle {
  left: 432px;
  top: 64px;
  opacity: 1;
}
.kerstverlichting #binnen1 .horz-line {
  opacity: 1;
  width: 636px;
  left: -15px;
  top: 169px;
}
.kerstverlichting #binnen1 .vert-line {
  opacity: 1;
  height: 117px;
  left: 620px;
  top: 53px;
}
.kerstverlichting #binnen1 .circle {
  left: 618px;
  top: 50px;
  opacity: 1;
}
.kerstverlichting #binnen5 .horz-line {
  opacity: 1;
  width: 529px;
  left: -15px;
  top: 200px;
}
.kerstverlichting #binnen5 .vert-line {
  opacity: 1;
  height: 108px;
  left: 513px;
  top: 93px;
}
.kerstverlichting #binnen5 .circle {
  left: 511px;
  top: 89px;
  opacity: 1;
}
.kerstverlichting #buiten1 .horz-line {
  opacity: 1;
  width: 803px;
  left: -15px;
  top: 45px;
}
.kerstverlichting #buiten1 .vert-line {
  opacity: 1;
  height: 190px;
  left: 787px;
  top: 45px;
}
.kerstverlichting #buiten1 .circle {
  left: 785px;
  top: 233px;
  opacity: 1;
}
.kerstverlichting #buiten2 .horz-line {
  opacity: 1;
  width: 390px;
  left: -15px;
  top: 76px;
}
.kerstverlichting #buiten2 .vert-line {
  opacity: 1;
  height: 90px;
  left: 375px;
  top: 77px;
}
.kerstverlichting #buiten2 .circle {
  left: 373px;
  top: 166px;
  opacity: 1;
}
.kerstverlichting #buiten3 .horz-line {
  opacity: 1;
  width: 361px;
  left: -15px;
  top: 107px;
}
.kerstverlichting #buiten3 .circle {
  left: 342px;
  top: 105px;
  opacity: 1;
}
.kerstverlichting #buiten4 .horz-line {
  opacity: 1;
  width: 636px;
  left: -15px;
  top: 138px;
}
.kerstverlichting #buiten4 .vert-line {
  opacity: 1;
  height: 75px;
  left: 620px;
  top: 138px;
}
.kerstverlichting #buiten4 .circle {
  left: 618px;
  top: 212px;
  opacity: 1;
}
.kerstverlichting #buiten5 .horz-line {
  opacity: 1;
  width: 880px;
  left: -15px;
  top: 169px;
}
.kerstverlichting #buiten5 .vert-line {
  opacity: 1;
  height: 63px;
  left: 864px;
  top: 169px;
}
.kerstverlichting #buiten5 .circle {
  left: 862px;
  top: 230px;
  opacity: 1;
}
.kerstverlichting #buiten6 .horz-line {
  width: 210px;
  left: -15px;
  top: 200px;
  opacity: 1;
}
.kerstverlichting #buiten6 .vert-line {
  opacity: 1;
  height: 37px;
  left: 194px;
  top: 200px;
}
.kerstverlichting #buiten6 .circle {
  left: 192px;
  top: 235px;
  opacity: 1;
}
.kerstverlichting #buiten7 .horz-line {
  width: 520px;
  left: -15px;
  top: 231px;
  opacity: 1;
}
.kerstverlichting #buiten7 .vert-line {
  opacity: 1;
  height: 57px;
  left: 504px;
  top: 231px;
}
.kerstverlichting #buiten7 .circle {
  left: 502px;
  top: 287px;
  opacity: 1;
}
.kerstverlichting #buiten8 .horz-line {
  width: 430px;
  left: -15px;
  top: 262px;
  opacity: 1;
}
.kerstverlichting #buiten8 .vert-line {
  opacity: 1;
  height: 5px;
  left: 414px;
  top: 258px;
}
.kerstverlichting #buiten8 .circle {
  left: 412px;
  top: 255px;
  opacity: 1;
}
@media (min-width: 1200px){
  .kerstverlichting .kerst-ani.binnen .content {
    background: url(../img/kerstverlichting-interieur.png) right bottom no-repeat !important;
  }
}
@media (min-width: 991px) {
  .kerstverlichting .soort {
    display: none !important;
  }
}
@media (min-width: 991px) and (max-width: 1199px){
  .kerstverlichting .kerst-ani .content {
    width: 728px;
  }
  .kerstverlichting .kerst-ani .menu {
    width: 212px;
  }
  .kerstverlichting .kerst-ani.binnen .content {
    background: url(../img/kerstverlichting-interieur.png) -35px bottom no-repeat !important;
  }
  .kerstverlichting .kerst-ani.buiten {
    background-position: -140px bottom;
  }
  .kerstverlichting .kerst-ani .binnen1 {
    right: 135px;
  }
  .kerstverlichting .kerst-ani .binnen2 {
    right: 10px;
  }
  .kerstverlichting .kerst-ani .binnen3 {
    left: 40px;
  }
  .kerstverlichting .kerst-ani .binnen4 {
    left: 270px;
  }
  .kerstverlichting .kerst-ani .binnen5 {
    left: 250px;
  }
  .kerstverlichting .kerst-ani .binnen6 {
    left: 290px;
  }

  .kerstverlichting .kerst-ani .buiten1 {
    right: 50px;
  }
  .kerstverlichting .kerst-ani .buiten2 {
    left: 215px;
  }
  .kerstverlichting .kerst-ani .buiten3 {
    left: 108px;
  }
  .kerstverlichting .kerst-ani .buiten4 {
    right: 231px;
  }
  .kerstverlichting .kerst-ani .buiten5 {
    right: 4px;
  }
  .kerstverlichting .kerst-ani .buiten6 {
    left: 20px;
  }
  .kerstverlichting .kerst-ani .buiten7 {
    left: 303px;
  }
  .kerstverlichting .kerst-ani .buiten8 {
    left: 242px;
  }

  .kerstverlichting #binnen2 .horz-line {
    width: 657px;
  }
  .kerstverlichting #binnen2 .vert-line {
    left: 642px;
  }
  .kerstverlichting #binnen2 .circle {
    left: 640px;
  }
  .kerstverlichting #binnen4 .horz-line {
    width: 385px;
  }
  .kerstverlichting #binnen4 .vert-line {
    left: 370px;
  }
  .kerstverlichting #binnen4 .circle {
    left: 368px;
  }
  .kerstverlichting #binnen6 .horz-line {
    width: 359px;
  }
  .kerstverlichting #binnen6 .vert-line {
    left: 344px;
  }
  .kerstverlichting #binnen6 .circle {
    left: 342px;
  }
  .kerstverlichting #binnen1 .horz-line {
    width: 562px;
  }
  .kerstverlichting #binnen1 .vert-line {
    left: 547px;
  }
  .kerstverlichting #binnen1 .circle {
    left: 545px;
  }
  .kerstverlichting #binnen5 .horz-line {
    width: 438px;
  }
  .kerstverlichting #binnen5 .vert-line {
    left: 423px;
  }
  .kerstverlichting #binnen5 .circle {
    left: 421px;
  }

  .kerstverlichting #buiten1 .horz-line {
    width: 635px;
  }
  .kerstverlichting #buiten1 .vert-line {
    left: 620px;
  }
  .kerstverlichting #buiten1 .circle {
    left: 618px;
  }
  .kerstverlichting #buiten2 .horz-line {
    width: 251px;
  }
  .kerstverlichting #buiten2 .vert-line {
    left: 235px;
  }
  .kerstverlichting #buiten2 .circle {
    left: 233px;
  }
  .kerstverlichting #buiten3 .horz-line {
    width: 213px;
  }
  .kerstverlichting #buiten3 .circle {
    left: 196px;
  }
  .kerstverlichting #buiten4 .horz-line {
    width: 486px;
  }
  .kerstverlichting #buiten4 .vert-line {
    left: 471px;
  }
  .kerstverlichting #buiten4 .circle {
    left: 469px;
  }
  .kerstverlichting #buiten5 .horz-line {
    width: 707px;
  }
  .kerstverlichting #buiten5 .vert-line {
    left: 692px;
  }
  .kerstverlichting #buiten5 .circle {
    left: 690px;
  }
  .kerstverlichting #buiten6 .horz-line {
    width: 75px;
  }
  .kerstverlichting #buiten6 .vert-line {
    left: 60px;
  }
  .kerstverlichting #buiten6 .circle {
    left: 58px;
  }
  .kerstverlichting #buiten7 .horz-line {
    width: 371px;
  }
  .kerstverlichting #buiten7 .vert-line {
    left: 356px;
  }
  .kerstverlichting #buiten7 .circle {
    left: 354px;
  }
  .kerstverlichting #buiten8 .horz-line {
    width: 279px;
  }
  .kerstverlichting #buiten8 .vert-line {
    left: 264px;
  }
  .kerstverlichting #buiten8 .circle {
    left: 262px;
  }
}