/* RESET */
* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

#html5Loader{
  top:0;
  left:0;
  background-color:white;
  background-color:rgba(255,255,255,1);
  /*background: url( ../../assets/img/bg-site.jpg );*/
  margin:0;
  position:fixed;
  z-index: 10000;
}
#html5Loader .fallback {
  position:absolute;
  text-align:center;
  width: 124px;
  height: 120px;  
  top:50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -62px;
  background: url( ../../assets/img/img-preloader-bg.png ) no-repeat;
  color: #000;
}

#html5Loader .fallback .inner {
  background: url( ../../assets/img/img-preloader.png ) no-repeat;
  width: 0%;
  display: block;
  height: 78px;
}

#html5Loader .fallback p {
  font-size: 14px; 
  text-align: center;
  line-height: 180%;
  font-family: "CatalinaTypewriter";
  color: #351b0e;
  width: 100%;
  top: 20px;  
}


/* FONTS */
/* Webfont: CatalinaTypewriter */

@font-face {
    font-family: 'CatalinaTypewriter';
    src: url('../../assets/fonts/CatalinaTypewriter.eot'); /* IE9 Compat Modes */
    src: url('../../assets/fonts/CatalinaTypewriter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../assets/fonts/CatalinaTypewriter.woff') format('woff'), /* Modern Browsers */
         url('../../assets/fonts/CatalinaTypewriter.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../../assets/fonts/CatalinaTypewriter.svg#CatalinaTypewriter') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'CatalinaTypewriterBold';
    src: url('../../assets/fonts/CatalinaTypewriter-Bold.eot'); /* IE9 Compat Modes */
    src: url('../../assets/fonts/CatalinaTypewriter-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../assets/fonts/CatalinaTypewriter-Bold.woff') format('woff'), /* Modern Browsers */
         url('../../assets/fonts/CatalinaTypewriter-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../../assets/fonts/CatalinaTypewriter-Bold.svg#CatalinaTypewriter-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


/* Webfont: CatalinaAnacapaSansBold */@font-face {
    font-family: 'CatalinaAnacapaSansBold';
    src: url('../../assets/fonts/CatalinaAnacapaSansBold.eot'); /* IE9 Compat Modes */
    src: url('../../assets/fonts/CatalinaAnacapaSansBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../assets/fonts/CatalinaAnacapaSansBold.woff') format('woff'), /* Modern Browsers */
         url('../../assets/fonts/CatalinaAnacapaSansBold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../../assets/fonts/CatalinaAnacapaSansBold.svg#CatalinaAnacapaSansBold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'hand_of_sean';
    src: url('../../assets/fonts/hand_of_sean_demo-webfont.eot');
    src: url('../../assets/fonts/hand_of_sean_demo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../assets/fonts/hand_of_sean_demo-webfont.woff2') format('woff2'),
         url('../../assets/fonts/hand_of_sean_demo-webfont.woff') format('woff'),
         url('../../assets/fonts/hand_of_sean_demo-webfont.ttf') format('truetype'),
         url('../../assets/fonts/hand_of_sean_demo-webfont.svg#hand_of_sean_demoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, body {
  height: 100%;
  overflow:hidden;
}

body {
  background: url( ../../assets/img/bg-site.jpg );
  -webkit-perspective: 2000px;
  perspective: 2000px;
  height: 100%;
  position: relative;
}

nav { 
  position: absolute;
  top: 220px;
  width: 100%;
  text-align: center;
}

nav a {
  margin: 0px 20px;
  font-family: 'CatalinaAnacapaSansBold';
  font-size: 40px;
  color: #341c10;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
}

nav a.active {
  text-decoration: underline;
}

#book-items
{
  width: 1020px;
  height: 800px;
  display: block;
  left: 50%;
  top: 50%;
  margin-left: -510px;
  margin-top: -360px;
  position: absolute;
}

#book-holder
{
  width: 1020px;
  height: 800px;
  display: block;
  left: 50%;
  top: 50%;
  margin-left: -510px;
  margin-top: -360px;
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}
#book-bg
{
  background-image: url("../../assets/img/bg-book.png");
  position: absolute;
  left: 10px;
  top: 6px;
  width: 999px;
  height: 192px;
  z-index: -1;
}

#book {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(58deg) rotateY(0deg) rotateZ(0deg);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateY(0deg) rotateZ(0deg);

  position: relative;
  margin: 400px auto;
  width: 800px;

}
#book .page {
  width: 400px;
  height: 400px;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: right center;
  transition-property: transform;
  transition-timing-function: ease-in;
  transition-duration: 1s;

  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -webkit-transition-property: transform;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 1s;  
}
#book .page .popup {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transition-timing-function: ease-in;
  transition-duration: 1s;

  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: bottom center;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 1s;  
}
#book .page .popup_a {
  /*height: 120px;*/
  /*width: 80px;*/
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
#book .page .popup_a.hide {
  -webkit-transform: rotateX(-1deg);
  transform: rotateX(-1deg);
}
#book .page .popup_b {
/*  height: 100px;
  width: 60px;*/
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
#book .page .popup_b.hide {
  -webkit-transform: rotateX(1deg);
  transform: rotateX(1deg);
}

#page_1 {
  background: url( '../../assets/img/bg.jpg' );
}

#page_2 {
  /*background-color: green;*/
  background: url( '../../assets/img/bg.jpg' );
  -webkit-transform: rotateY(178.5deg);
  transform: rotateY(178.5deg);
  z-index: 60;
}
#page_2.flip {
  -webkit-transform: rotateY(0.5deg);
  transform: rotateY(0.5deg);
}

#page_3 {
  background: url( '../../assets/img/bg.jpg' );
  -webkit-transform: rotateY(179deg);
  transform: rotateY(179deg);
  z-index: 50;
}
#page_3.flip {
  -webkit-transform: rotateY(1deg);
  transform: rotateY(1deg);
}

#page_4 {
  background: url( '../../assets/img/bg.jpg' );
  -webkit-transform: rotateY(179.5deg);
  transform: rotateY(179.5deg);
  z-index: 40;
}
#page_4.flip {
  -webkit-transform: rotateY(1.5deg);
  transform: rotateY(1.5deg);
}

#page_5 {
  background: url( '../../assets/img/bg.jpg' );
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  z-index: 30;
}

.center {
  text-align: center; 
}

.popup .inner {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.popup .inner p,
.popup .inner figcaption {
  font-size: 12px; 
  line-height: 180%;
  font-family: "CatalinaTypewriter";
  color: #351b0e;
}

#line-round1 p,
#line-round2 p,
#line-round3 p {
  font-family: 'hand_of_sean';
  color: #351b0e;
  font-weight: normal;
  text-align: center;
  width: 210px;
  line-height: 150%;
  font-size: 16px;
}

#line-round1 p {
    -ms-transform: rotate(-15deg); /* IE 9 */
    -moz-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
  
    margin-left: 24px;
    margin-top: 64px;    
}

#line-round2 p {
  margin-left: 30px;
  margin-top: 84px;
}
#line-round3 p {
  margin-left: 24px;
  margin-top: 76px;
}


/* BACKGROUND ELEMENTS */
#logo {
  background-image: url("../../assets/img/logo.png");
  position: absolute;
  left: 50%;
  top: -400px;
  width: 330px;
  height: 138px;
  margin-left: -165px;
  z-index: -1;
}

#cloud3 {
  background-image: url("../../assets/img/img-wolk3.png");
  position: absolute;
  left: 740px;
  top: 10px;
  width: 232px;
  height: 122px;
  z-index: 1;
  -webkit-animation: 30s ease-in-out 1s normal none infinite animation-bounce-fly-cloud;
  animation: 30s ease-in-out 1s normal none infinite animation-bounce-fly-cloud;
}

#cloud2 {
  background-image: url("../../assets/img/img-wolk2.png");
  position: absolute;
  left: 70px;
  top: 90px;
  width: 225px;
  height: 120px;
  z-index: -1;
  -webkit-animation: 30s ease-in-out 0.5s normal none infinite animation-bounce-fly-cloud;
  animation: 30s ease-in-out 0.5s normal none infinite animation-bounce-fly-cloud;
}

#cloud1 {
  background-image: url("../../assets/img/img-wolk1.png");
  position: absolute;
  left: 500px;
  top: 180px;
  width: 225px;
  height: 120px;
  z-index: -1;
  -webkit-animation: 30s ease-in-out 0s normal none infinite animation-bounce-fly-cloud;
  animation: 30s ease-in-out 0s normal none infinite animation-bounce-fly-cloud;
}

#bird-orange {
  background-image: url("../../assets/img/img-bird1.png");
  background-size: cover;
  position: absolute;
  left: 220px;
  top: 40px;
  width: 62px;
  height: 87px;
  z-index: -2;
  -webkit-animation: 5s ease-in-out 0.3s normal infinite animation-bounce-fly;
  animation: 5s ease-in-out 0.3s normal none infinite animation-bounce-fly;  
}

#bird-green {
  background-image: url("../../assets/img/img-bird2.png");
  background-size: cover;
  position: absolute;
  left: 630px;
  top: 260px;
  width: 60px;
  height: 85px;
  z-index: -1;
  -webkit-animation: 5s ease-in-out 1.4s normal none infinite animation-bounce-fly;
  animation: 5s ease-in-out 1.4s normal none infinite animation-bounce-fly;  
}

#bird-yellow {
  background-image: url("../../assets/img/img-bird3.png");
  background-size: cover;
  position: absolute;
  left: 740px;
  top: -20px;
  width: 76px;
  height: 64px;
  z-index: -1;
  -webkit-animation: 5s ease-in-out 1.4s normal none infinite animation-bounce-fly;
  animation: 5s ease-in-out 1.4s normal none infinite animation-bounce-fly;  
}

#sun {
  background-image: url("../../assets/img/img-sun.png");
  position: absolute;
  margin-left: -108px;
  left: 50%;
  top: -90px;
  width: 217px;
  height: 217px;
  z-index: -1;

  -webkit-animation-name: spin;
  -webkit-animation-duration: 70000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 70000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 70000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 70000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;  
}



/* PAGE 1 - LINKS */

#line-round1 {
  background-image: url("../../assets/img/img-line-round.png");
  position: absolute;
  left: 0px;
  top: 170px;
  width: 244px;
  height: 166px;
  z-index: -1;
}

#line-round2 {
  background-image: url("../../assets/img/img-line-round2.png");
  position: absolute;
  left: 230px;
  top: 200px;
  width: 254px;
  height: 167px;
  z-index: -1;
}

#line-round3 {
  background-image: url("../../assets/img/img-line-round2.png"); position: absolute;  
  left: 730px;
  top: 120px;
  width: 254px; height: 167px; z-index: 2;
  transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  opacity: 0;
}


#polaroid {
  background-image: url("../../assets/img/bg-polaroid.png");
  position: absolute;
  left: 765px;
  top: 90px;
  width: 203px;
  height: 325px;
  z-index: 100;
  -webkit-animation: 30s ease-in-out 1s normal none infinite animation-bounce-fly-cloud;
  animation: 30s ease-in-out 1s normal none infinite animation-bounce-fly-cloud; 
  -webkit-transform: translateZ(0);
  -webkit-transform: translate3d(0,0,0);
}

  #polaroid figure {
    padding: 0px;
    margin: 10px 0px 0px 14px;
    position: absolute;
    top: 101px;
    left: 0px;
    opacity: 0;
  }

  #polaroid figcaption {
    text-align: center;
    font-family: 'hand_of_sean';
    color: #010820;
    font-weight: normal;
    text-align: center;
    line-height: 150%;
    font-size: 14px;
  }


/* GASTENBOEK */

#cord {
  background-image: url("../../assets/img/gastenboek/bg-line.png");
  position: absolute;
  left: 17px;
  top: 50px;
  width: 1000px;
  height: 132px;
  z-index: 1;
  opacity: 0;
}

#alle-reacties { display: none; }
#reacties { opacity: 0; }
.papier-reactie {
  background-image: url("../../assets/img/gastenboek/bg-papierreactie.png");
  position: absolute;
  display: block;
  width: 324px;
  height: 233px;
  z-index: 1;
}

.papier-reactie.nieuw {
  opacity: 0;
  transform: rotate(28deg);
}


.papier-reactie:nth-child(1) {
  left: 18px;
  transform: rotate(14deg);
  -ms-transform: rotate(14deg);
  -moz-transform: rotate(14deg);
  -webkit-transform: rotate(14deg);
  top: 94px;
}

.papier-reactie:nth-child(2) {
    left: 356px;
    top: 140px;
}

.papier-reactie:nth-child(3) {
  left: 690px;
  transform: rotate(-14deg);
  -ms-transform: rotate(-14deg);
  -moz-transform: rotate(-14deg);
  -webkit-transform: rotate(-14deg);
  top: 94px;
}



.next {
  background-image: url("../../assets/img/bg-btn-next.png");
  position: absolute;
  top: 320px;
  right: 10px;
  width: 79px;
  height: 79px;
  z-index: 2;
  display: none;

  -webkit-transition: all 1s ease;                  
  -moz-transition: all 1s ease;                 
  -o-transition: all 1s ease;   
  -ms-transition: all 1s ease;          
  transition: all 1s ease;  
}

.next:hover
{
  background-image: url("../../assets/img/bg-btn-next-hover.png");
  background-size: cover;
}


.prev {
  position: absolute;
  font-weight: normal;
  font-size: 14px;
  top: -60px;
  text-decoration: underline;
  z-index: 3;
  font-weight: bold;
  color: #ff0000;
}

.papier-reactie .inner {
  padding: 40px 15px 0px 15px;
}
.papier-reactie p {
  margin: 0px;
  padding: 0px;
  font-size: 14px; 
  text-align: center;
  line-height: 180%;
  font-family: "CatalinaTypewriter";
  color: #351b0e;
}
.papier-reactie h3,
#nieuws-holder h3 { 
  text-align: center;
  line-height: 180%;
  margin: 0px;
  padding: 0px;  
  font-family: 'CatalinaAnacapaSansBold';
  font-size: 28px;
  color: #341c10;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
}

#gastenboek-form {
  background-image: url("../../assets/img/gastenboek/bg-papierinvoeren.png");
  background-size: cover;
  position: absolute;
  left: 0px;
  top: 200px;
  width: 360px;
  height: 160px;
  z-index: 1;
  z-index: 1;
  padding: 34px 30px 0px 48px;
}

#gastenboek-btn {
  background-image: url("../../assets/img/bg-btn-form.png");
  background-size: cover;
  position: absolute;
  left: 300px;
  top: 330px;
  width: 60px;
  height: 43px;
  z-index: 1;
}

#gastenboek-btn.success,
#book .page #gastenboek-btn.success:hover {
  background-image: url("../../assets/img/bg-btn-form-success.png");
  background-size: cover;
}


#book .page #gastenboek-btn:hover
{
  background-image: url("../../assets/img/bg-btn-form-hover.png");
  background-size: cover;
}

input:focus,
textarea:focus {
  outline: none;
}

#gras1 {
  background-image: url("../../assets/img/gastenboek/img-gras1.png");
  background-size: cover;
  position: absolute;
  left: 20px;
  top: 280px;
  width: 360px;
  height: 80px;
  z-index: 4;
}

#kat {
  background-image: url("../../assets/img/gastenboek/img-kat.png");
  background-size: cover;
  position: absolute;
  left: 210px;
  top: 200px;
  width: 164px;
  height: 118px;
  z-index: 3;
}

#gras2 {
  background-image: url("../../assets/img/gastenboek/img-gras2.png");
  background-size: cover;
  position: absolute;
  left: 61px;
  top: 230px;
  width: 329px;
  height: 75px;
  z-index: 2;
}

#gras3 {
  background-image: url("../../assets/img/gastenboek/img-gras3.png");
  background-size: cover;
  position: absolute;
  left: 30px;
  top: 140px;
  width: 252px;
  height: 73px;
  z-index: 1;
}




#popup_1 {
  background: url('../../assets/img/welkom/page1-golf.png');
  left: 24px;
  top: 270px;

  width: 340px;
  height: 94px;
  background-size: cover;
  z-index: 100;
}

#popup_golf2 {
  background: url('../../assets/img/welkom/page1-golf2.png');
  background-size: cover;
  left: 60px;
  top: 180px;
  width: 320px;
  height: 112px;
  z-index: 1;
}

#popup_golf3 {
  background-image: url("../../assets/img/welkom/page1-golf3.png");
  background-size: cover;
  position: absolute;
  left: 24px;
  top: 80px;
  width: 320px;
  height: 124px;
  z-index: 1;
}

#popup_bootje {
  background-image: url("../../assets/img/welkom/page1-bootje.png");
  background-size: cover;
  position: absolute;
  left: 60px;
  top: 210px;
  width: 268px;
  height: 112px;
  z-index: 1;
}



#popup_2 {
  background-color: brown;
  left: 30px;
  top: 130px;
}

#popup_2_b {
  background-image: url("../../assets/img/info.png");
  width: 405px;
  height: 195px;
  left: 120px;
  top: 100px;
}

#p2-info-block {
  background-image: url("../../assets/img/welkom/page2-a-block.png");
  position: absolute;
  left: 24px;
  top: 190px;
  width: 360px;
  height: 160px;
  z-index: 1;
  background-size: cover;  
}
#p2-info-block p {
  margin-top: 49px;
  margin-left: 22px;
}


#popup_3 {
  background-color: teal;
  left: 120px;
  top: 60px;
}

#popup_3_b {
  background-color: yellow;
  left: 180px;
  top: 150px;
}

#popup_4 {
  background-color: yellow;
  left: 100px;
  top: 100px;
}

#popup_4_b {
  background-color: orange;
  left: 60px;
  top: 80px;
}

#popup_5_b {
  background-color: teal;
  left: 30px;
  top: 180px;
}



h2 {
  font-family: 'hand_of_sean';
  color: #351b0e;
  font-weight: normal;
  font-size: 13px;
}

#form {
  
  margin-top: 0px;
  position: relative;

}

  #form .form-section {
      opacity: 0;
      position: absolute;
      height: auto;
      z-index: 0;
      width: 100%;
      left: 0px;
      top: 10px;
      padding: 0px;
      display: none;
  }

    #form .form-section.active {
      z-index: 1;
      opacity: 1;
      display: block;
    }
  
    #form .form-section label {
      margin: 0px 0px 10px 0px;
      margin: 0px;
      padding: 0px;
      font-size: 12px;
      line-height: 180%;
      font-family: "CatalinaTypewriterBold";
      color: #351b0e;      
    }

    #form .form-section label .error {
        color: #B07763;
        font-size: 11px;
    }

    #form .form-section .inner {
      width: 100%;
      display: block;
      height: auto;
      position: relative;
      transform: rotateY(0deg);
    }
      
      #form .form-section .inner input {
        margin-bottom: 10px;
        width: 100%;
        border: 0px;
        border-bottom: 1px dotted #351b0e;
        text-align: left;
        background: rgba(255,255,255,0);
        font-family: "CatalinaTypewriter";
        font-size: 12px;
        color: #351b0e;
      }
      #form .form-section .inner textarea {
        width: 100%;
        text-align: left;
        border: 1px dotted #351b0e;
        font-family: "CatalinaTypewriter";
        font-size: 12px;
        color: #351b0e;
        background: rgba(255,255,255,0);
      }
      #form .form-section .inner a.btn {
        width: 100%;
      }
    


/* PICTURES */

#zand1 { background-image: url("../../assets/img/pictures/bg-zand1.png"); background-size: cover; position: absolute; left: 48px; top: 300px; width: 320px; height: 40px; z-index: 5; }
#olifant { background-image: url("../../assets/img/pictures/img-olifant.png");background-size: cover;position: absolute;left: 0px;top: 102px;width: 355px;height: 214px;z-index: 1; }
#zand2 { background-image: url("../../assets/img/pictures/bg-zand2.png"); background-size: cover; position: absolute; left: 20px; top: 250px; width: 256px; height: 50px; z-index: 3; }
#zand3 { background-image: url("../../assets/img/pictures/bg-zand3.png"); background-size: cover; position: absolute; left: 120px; top: 220px; width: 256px; height: 50px; z-index: 2; }
#zand4 { background-image: url("../../assets/img/pictures/bg-zand4.png"); background-size: cover; position: absolute; left: 50px; top: 150px; width: 200px; height: 62px; z-index: 1; }

#images-holder, #nieuws-holder { background-image: url("../../assets/img/pictures/bg-content-images.png"); background-size: cover; position: absolute; left: 35px; top: 52px; width: 358px; height: 301px; z-index: 1; }
#images-holder .inner, #nieuws-holder .inner { overflow: auto; height: 242px; width: 450px; margin-left: 21px; margin-top: 39px; width: 284px; }
.custom-scrollbar::-webkit-scrollbar-track, { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #edece0; }
.custom-scrollbar::-webkit-scrollbar { width: 7px; background-color: #edece0; }
.custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #341c10; }


#images-holder .inner figure {
  float: left;
  width: 137px;
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
}

.img-holder {
  background-image: url("../../assets/img/pictures/img-holder.png");
  width: 94px;
  height: 95px;
  z-index: 1;
  padding: 7px 0px 0px 0px;
  margin: auto;
}

#nieuws-holder .img-holder {
  width: 76px;
  height: 76px;
  background-size: cover;
}

#img-mama-papa {
  background-image: url("../../assets/img/pictures/img-mama-papa.png");
  background-size: cover;
  position: absolute;
  left: 260px;
  top: 228px;
  width: 294px;
  height: 395px;
  z-index: 100;
  opacity: 0;
}

#img-mama-papa-nu {
  background-image: url("../../assets/img/pictures/img-mama-papa-nu.png");
  position: absolute;
  left: 75px;
  top: 20px;
  z-index: -1;
  opacity: 0;
  width: 248px;
  height: 271px;
}



/* FOTOS */

#gravel1 { background-image: url("../../assets/img/nieuws/img-gravel1.png"); background-size: cover; position: absolute; left: 100px; top: 297px; width: 264px; height: 52px; z-index: 1; }
#gravel2 { background-image: url("../../assets/img/nieuws/img-gravel2.png"); background-size: cover; position: absolute; left: 12px; top: 250px; width: 343px; height: 43px; z-index: 1; }
#gravel3 { background-image: url("../../assets/img/nieuws/img-gravel3.png"); background-size: cover; position: absolute; left: 20px; top: 210px; width: 264px; height: 52px; z-index: 1; }
#gravel4 { background-image: url("../../assets/img/nieuws/img-gravel4.png"); background-size: cover; position: absolute; left: 160px; top: 170px; width: 205px; height: 65px; z-index: 1; }
#boom { background-image: url("../../assets/img/nieuws/img-boom.png");background-size: cover;position: absolute;left: 50px;top: 110px;width: 215px;height: 209px;z-index: 4; }
#nieuws-holder { background-image: url("../../assets/img/nieuws/bg-content-nieuws.png"); background-size: cover; position: absolute; left: 35px; top: 52px; width: 358px; height: 301px; z-index: 1; }

#nieuws-holder .inner { overflow: scroll; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); margin-left: 50px; margin-top: 39px; width: 286px; padding-right: 20px; }
#nieuws-holder .inner article { margin-top: 30px; }
#nieuws-holder .inner article:first-of-type { margin-top: 0px; }
#nieuws-holder .inner h3 { text-align: left; margin: 0; } 
#nieuws-holder .inner time {
  font-family: 'hand_of_sean';
  color: #351b0e;
  font-weight: normal;
  text-align: center;
  line-height: 150%;
  font-size: 9px;
} 
#nieuws-holder .inner p { margin-top: 20px; } 
#nieuws-holder .inner figure { float: left; margin: 10px 10px 10px 0px; }
#nieuws-holder .inner figure .img-holder { padding: 6px 0px 0px 6px; }
#nieuws-holder .inner footer { 
  width: 271px;
  height: 8px;
  background-image: url('../../assets/img/line-nieuws.png');
  background-size: cover;
  margin: 10px 0px 0px 0px;
  float: left;
}


#footer 
{
  position: absolute;
  top: 280px;
  width: 100%;
  text-align: center;
  font-family: 'hand_of_sean';
  color: #351b0e;
  opacity: 0.3;
  font-size: 12px;
}
#footer a {
  color: #351b0e;
}


.mobiletablet,
.browsehappy,
.ie-alert {
  padding: 10px;
  font-family: "CatalinaTypewriter";
  font-size: 20px;
  color: #351b0e;
  background: #ffffff;
  line-height: 150%;
  text-align: center;

  width: 100%;
  display: fixed;
  height: 100%;
  position: fixed;
  background: rgba(255,255,255,0.9);
  z-index: 1000000;  
}

.mobiletablet,
.ie-alert {
  display: none;
}


@keyframes animation-bounce-fly { 50% { transform: translateY(-8px); } }
@-ms-keyframes  animation-bounce-fly { 50% { -ms-transform: translateY(-8px); } }
@-moz-keyframes  animation-bounce-fly { 50% { -moz-transform: translateY(-8px); } }
@-webkit-keyframes  animation-bounce-fly { 50% { -webkit-transform: translateY(-8px); } }

@keyframes animation-bounce-fly-cloud { 50% { transform: translateY(-20px) translateX(-20px); } }
@-ms-keyframes  animation-bounce-fly-cloud { 50% { -ms-transform: translateY(-20px) translateX(-20px); } }
@-moz-keyframes  animation-bounce-fly-cloud { 50% { -moz-transform: translateY(-20px) translateX(-20px); } }
@-webkit-keyframes  animation-bounce-fly-cloud { 50% { -webkit-transform: translateY(-20px) translateX(-20px); } }

@-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }