@font-face {
    font-family: WonderFont;
    src: url(../fonts/w.otf);
    font-weight:400;
}
@font-face {
    font-family: VeniceFont;
    src: url(../fonts/v.otf);
    font-weight:400;
}

body {
  background-image:url('../images/bg.jpg');
  background-repeat: repeat;
  font-family: WonderFont, monospace;
  font-size: 25px;
  color: #666;
  margin: 0;
}

p {
  font-size: 150%;
}


.nav {
  position: fixed;
  width: 30px;
  height: 84px;
  z-index: 100;
  left: 10px;
  top: 50%;
  margin-top: -42px; 
}

.nav a:hover {
  background: #fff;
  box-shadow: 2px 2px 2px #000;
}

.nav a:focus {
  border:0;
  outline:none;
}
.nav a {
  text-indent: -9999px;
  display: block;
  width: 14px;
  height: 14px;
  background: rgba(245, 246, 247, 0.7);
  box-shadow: 2px 2px 2px #555;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  margin-bottom: 20px;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s; 
}
.nav a:hover {
  background: #ec39ba;
  -webkit-transition: background 1s;
  -moz-transition: background 1s;
  -ms-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s; 
}


ul.slides {
  line-height: 0px;
  padding: 0px; }
  
ul.slides li {
display: inline-block;
width: 24%; 
font-size: 130%;
margin-bottom: 7px;
}

ul.slides li p {
  font-size: 60%;
}
  
ul.slides li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; }

ul.slides li a:hover .d-hover {
  display: block; 
  
}
      
ul.slides li a img {
  width: 100%; }

ul.slides li a p {
  display: none; 
}

.showcase-tiles {
  padding-top: 0px;
  margin-top: 0px;
  display: table-row; }

.help {
   position: absolute;
   top:70px;
   left: 70px;
   display: inline-block;
   width: 90%;
}

#helptilt {
  display: none;
}

.help span {
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
  color:#fff;
}

.help img {
  float:left;
  width: 30px;
}

.tilt {
  -webkit-animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

h2 {
  color:#ec39ba;
  margin-top: 0;
  font-size: 60px;
}

.intro h1, .intro h2, .intro h3 {
  color:#fff;
}

.intro h1 {
  font-size:245px;
}

.intro h2 {
  font-size:145px;
}

.intro h3 {
  font-size:80px;
  color:#333;
}

.intro h4 {
  color:#fff;
  font-size:40px;
}

img {
  display: block;
  width: 100%;
}

input[type=checkbox] {
  display: none;
}

label {
  display: inline-block;
  margin-right: 1em;
  padding: 0.4em 0;
  cursor: pointer;
}

button {
  border: 10px solid #00FFAA;
  font-family: monospace;
  position: absolute;
  line-height: 60px;
  text-align: right;
  padding: 0 1.2em;
  background: #444;
  font-size: 24px;
  cursor: pointer;
  display: block;
  outline: none;
  height: 80px;
  width: 80%;
  top: 260px;
  margin: 0;
  left: 10%;
}

button:hover {
  background: #00FFAA;
}

input[type=checkbox] + label:before {
  display: inline-block;
  position: relative;
  background: #444;
  margin-right: 8px;
  content: "";
  height: 16px;
  width: 16px;
  top: 1px;
}

input[type=checkbox]:checked + label:before {
  background: #00FFAA;
}

.intro {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;

}

.intro .bordered {
  margin:40px;
  border:10px solid white;
}

.introtext2 {
  will-change: transform;
  color:#fff;
  margin-left:100px;
  margin-top: 400px;
}

.info {
  background-image: url('../images/bg2.jpg');
  background-repeat: repeat;
  text-align: center;
  padding: 50px;
  padding-top:75px;
  border-top:20px solid white;
}

.info.bubblesbg h2 {
  color: #fff;
}

.info span, .info p {
  font-family: VeniceFont, Arial;
}

.container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 5%;
}

.wrapper {
  min-height: 260px;
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  max-height: 100%;
}

.center {
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}


.fill {
  position: absolute;
  bottom: 5%;
  right: 5%;
  left: 5%;
  top: 5%;
}

.expand-width {
  width: 100%;
}

.border {
  border: 2px dashed #00FFAA;
}

.aspect {
  opacity: 0.2;
}

.layer:nth-child(1) {
  opacity: 0.15;
}
.layer:nth-child(1) button {
  -webkit-transform: rotate(150deg);
}

.layer:nth-child(2) {
  opacity: 0.30;
}
.layer:nth-child(2) button {
  -webkit-transform: rotate(120deg);
}

.layer:nth-child(3) {
  opacity: 0.45;
}
.layer:nth-child(3) button {
  -webkit-transform: rotate(90deg);
}

.layer:nth-child(4) {
  opacity: 0.60;
}
.layer:nth-child(4) button {
  -webkit-transform: rotate(60deg);
}

.layer:nth-child(5) {
  opacity: 0.75;
}
.layer:nth-child(5) button {
  -webkit-transform: rotate(30deg);
}

.layer:nth-child(6) {
  opacity: 0.90;
}
.layer:nth-child(6) button {
}


.seal {
  will-change: transform;
  cursor:pointer;
  width: 100px;
}

.seal.small {
  margin-top: 140px;
  margin-left:300px;
}

.seal.small2 {
  margin-top: 480px;
  margin-left:100px;
  width: 250px;
}

.seal.big {
  margin-left: -500px;
  margin-top:300px;
  width:150%;
}

.seal.big2 {
  margin-left: 300px;
  margin-top:300px;
  width:130%;
}

.d-hover {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color:#FFF;
  text-align: center;
  padding:5px;
  padding-top: 25%;
  line-height: 20px;
  opacity:0.9;
  background: #ec39ba; 
}

.d-hover p {
    display: block !important;
    z-index: 500;
    margin-top: 25px;
    font-size: 14px;
    font-style: italic;
    font-weight: 300; }

.bubbels.big {
  width: 500px;
  margin-top: 400px;
  margin-left: -300px;
}

.bubbels.big2 {

  margin-top: 200px;
  width: 800px;
  margin-left: 300px;
}

.bubbels.big2 {

  margin-top: 0px;
  width: 1400px;
  margin-left: -500px;
}

.btn {
  background-color:#fff;
  padding:25px 30px 20px 30px;
  margin-top: 20px;
  cursor: pointer;
  display: inline-block;
  border-radius:5px;
  box-shadow: 2px 2px 5px #555;
  text-decoration: none;
  color:#ec39ba;
  font-size:30px;
}


.family {
  display: inline-block;
}

.familypic {
  display: inline-block;
  float: left;
}

.familypic img:hover {
  -webkit-filter: drop-shadow(0px 10px 20px #fff);
  filter: drop-shadow(0px 10px 20px #fff);
}

#papa {
  will-change: transform;
  margin-left: 17%;
  margin-right: 30px;
  padding-top: 140px;
  width: 20%;
}

#mama {
  will-change: transform;
  width: 20%;
  padding-top: 140px;
}

#lucie  {
  will-change: transform;
  width: 10%;
}

#vince {
  will-change: transform;
  padding-top: 90px;
  width: 20%;
}


#et {
  will-change: transform;
  margin-right: 70px;
  padding-top: 80px;
  width: 20%;
}

#eline {
  will-change: transform;
  margin-right: 30px;
  padding-top: 40px;
  width: 18%;
}

#opaoma1 {
  will-change: transform;
  margin-right: 50px;
  width: 25%;
  padding-top: 140px;
}


#opaoma2 {
  will-change: transform;
  width: 25%;
  padding-top: 140px;
}

.familypic:last-child img {
  float: none;
}

.familypic span {
  visibility: hidden;
  color: #fff;
  font-family: WonderFont;
  font-size:1.2em;
  text-shadow:2px 2px 2px #444;
}

.familypic:hover span {
  visibility: visible;
}

.family.alt {
  display: none;
}

.swinghover:hover{

  -webkit-animation:swinging 10s ease-in-out infinite;
  -moz-animation:swinging 10s ease-in-out infinite;
  animation:swinging 10s ease-in-out infinite;
  -webkit-transform-origin:50% 0;
  -moz-transform-origin:50% 0;
  transform-origin:50% 0;
}

.swing{

  -webkit-animation:swinging 10s ease-in-out infinite;
  -moz-animation:swinging 10s ease-in-out infinite;
  animation:swinging 10s ease-in-out infinite;
  -webkit-transform-origin:50% 0;
  -moz-transform-origin:50% 0;
  transform-origin:50% 0;
}

.swing2{
  -webkit-animation:swinging 30s ease-in-out infinite;
  -moz-animation:swinging 30s ease-in-out infinite;
  animation:swinging 30s ease-in-out infinite;
  -webkit-transform-origin:20% 0;
  -moz-transform-origin:20% 0;
  transform-origin:20% 0;
}

.slow-swing {
  -webkit-animation:swinging 40s ease-in-out infinite;
  -moz-animation:swinging 40s ease-in-out infinite;
  animation:swinging 40s ease-in-out infinite;
  -webkit-transform-origin:50% 0;
  -moz-transform-origin:50% 0;
  transform-origin:80% 0;
}

.slow-swing2 {
  -webkit-animation:swinging 60s ease-in-out infinite;
  -moz-animation:swinging 60s ease-in-out infinite;
  animation:swinging 60s ease-in-out infinite;
  -webkit-transform-origin:50% 0;
  -moz-transform-origin:50% 0;
  transform-origin:50% 0;
}

@-webkit-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@-moz-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@-ms-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}


@-webkit-keyframes swinging{

  0% { -webkit-transform: rotate(0); }
  5% { -webkit-transform: rotate(10deg); }
  10% { -webkit-transform: rotate(-9deg); }
  15% { -webkit-transform: rotate(8deg); }
  20% { -webkit-transform: rotate(-7deg); }
  25% { -webkit-transform: rotate(6deg); }
  30% { -webkit-transform: rotate(-5deg); }
  35% { -webkit-transform: rotate(4deg); }
  40% { -webkit-transform: rotate(-3deg); }
  45% { -webkit-transform: rotate(2deg); }
  50% { -webkit-transform: rotate(0); }
  55% { -webkit-transform: rotate(10deg); }
  60% { -webkit-transform: rotate(-9deg); }
  65% { -webkit-transform: rotate(8deg); }
  70% { -webkit-transform: rotate(-7deg); }
  75% { -webkit-transform: rotate(6deg); }
  80% { -webkit-transform: rotate(-5deg); }
  85% { -webkit-transform: rotate(4deg); }
  90% { -webkit-transform: rotate(-3deg); }
  95% { -webkit-transform: rotate(2deg); }
  100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
  0% { -moz-transform: rotate(0); }
  5% { -moz-transform: rotate(10deg); }
  10% { -moz-transform: rotate(-9deg); }
  15% { -moz-transform: rotate(8deg); }
  20% { -moz-transform: rotate(-7deg); }
  25% { -moz-transform: rotate(6deg); }
  30% { -moz-transform: rotate(-5deg); }
  35% { -moz-transform: rotate(4deg); }
  40% { -moz-transform: rotate(-3deg); }
  45% { -moz-transform: rotate(2deg); }
  50% { -moz-transform: rotate(0); }
  55% { -moz-transform: rotate(10deg); }
  60% { -moz-transform: rotate(-9deg); }
  65% { -moz-transform: rotate(8deg); }
  70% { -moz-transform: rotate(-7deg); }
  75% { -moz-transform: rotate(6deg); }
  80% { -moz-transform: rotate(-5deg); }
  85% { -moz-transform: rotate(4deg); }
  90% { -moz-transform: rotate(-3deg); }
  95% { -moz-transform: rotate(2deg); }
  100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
  0% { transform: rotate(0); }
  5% { transform: rotate(10deg); }
  10% { transform: rotate(-9deg); }
  15% { transform: rotate(8deg); }
  20% { transform: rotate(-7deg); }
  25% { transform: rotate(6deg); }
  30% { transform: rotate(-5deg); }
  35% { transform: rotate(4deg); }
  40% { transform: rotate(-3deg); }
  45% { transform: rotate(2deg); }
  50% { transform: rotate(0); }
  55% { transform: rotate(10deg); }
  60% { transform: rotate(-9deg); }
  65% { transform: rotate(8deg); }
  70% { transform: rotate(-7deg); }
  75% { transform: rotate(6deg); }
  80% { transform: rotate(-5deg); }
  85% { transform: rotate(4deg); }
  90% { transform: rotate(-3deg); }
  95% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

.bubblesbg {
  background-image:url('../images/bubbles.png');
  background-repeat: repeat;
}

#bubbles { height: 100%; }
#bubbles { padding: 100px 0; }
.bubble {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
}

.x6 {
    right:50px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x7 {
    right: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x8 {
    right: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x9 {
    right: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x10 {
    right: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 4s linear infinite, sideWays 1s ease-in-out infinite alternate;
}



@-webkit-keyframes moveclouds { 
    0% { 
        top: 1000px;
    }
    100% { 
        top: -500px;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes moveclouds {     
    0% { 
        top: 1000px;
    }

    100% { 
        top: -500px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
@-o-keyframes moveclouds {
    0% { 
        top: 1000px;
    }
    100% { 
        top: -500px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}



@media (max-width: 1024px) {

    ul.slides li {
      width: 40%;
    }
}


@media (max-width: 640px) {

    .help {
       position: relative;
       top: 0;
       left: 0;
       right: 0;
             font-size: 70%;
            -webkit-box-shadow: inset 0px -9px 12px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: inset 0px -9px 12px 0px rgba(0,0,0,0.75);
      box-shadow: inset 0px -9px 12px 0px rgba(0,0,0,0.75);
      background-color: #555;
      width: 100%;
    }

    .help span {
      margin-left: 5px;
    }
 
    h2 {
      font-size:45px;
    }

    .intro h1 { font-size: 120px;}
    .intro h3 { color:#fff; font-size: 50px; }
    .intro h4 { font-size: 25px; }

    .intro {
    }

    #kadootje p {
      font-size:100%;
    }

    .intro .bordered {
      overflow: visible;
      margin:20px;
      border-width: 4px;
    }
    .center {
      text-align: center;
      max-width: 120px;
      margin: 0 auto;
      width: 100%;
    }
    .container {
      position: relative;
      max-width:640px;
      margin: 0 auto;
      padding: 5%;
    }

    .introtext {

      margin-left:-10px;
      margin-top:-10px;
    }

    .introtext2 {
      margin-left: 0px;
      margin-top: 160px;
    }

    .introtext2 h4 {

      padding-left: 120px;
    }
   
     
    .seal.small {
      margin-left: 70px;
    }
    .seal.small2 {
      margin-top:250px;
      margin-left: 50px;
      width: 60%;
    }
    .seal.big {
      margin-left: -200px;
      margin-top: 170px;
      width: 100%;
    }
    .seal.big2 {
      margin-left: 200px;
      margin-top: 170px;
      width: 100%;
    }

    .nav {
      position: fixed;
      width: 30px;
      height: 84px;
      z-index: 100;
      right: 0;
      top: 30%;
      margin-top: -42px; 
    }

    ul.slides li {
      width: 90%;
    }

    .family {
      display: none;
    }

    .family.alt {
      display: block;
      color: #fff;
      text-shadow:2px 2px 4px #000;
    }

    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size:150%;
    }

    p {
      margin-top: 20px;
    }

    #lucie {
      text-align: center;
      margin-left: 25%;
      width:50%;
    }

    #lucie span {
      color: #fff;
      font-size: 35px;
      text-shadow:2px 2px 4px #000;
    }


}