#slider {
  position:relative;
}
  #slider .sequence-canvas {
    margin:0;
    padding:0;
    position:relative;
    overflow:hidden;
    list-style:none;
    height: 460px;
    width:100%;

  }

  .sequence-canvas li {
    display:block;
    width:100%;
    height:474px;
    overflow:hidden;
    opacity:0;
    position:absolute;
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    transition: 1s all ease;
    background-size:cover;
    background-repeat:no-repeat;
    box-shadow: 0 0 40px 15px rgba(0, 0, 0, 0.3) inset;
  }

<<<<<<< HEAD
  .sequence-canvas li div {
      margin:auto;
      width:840px;
      height:374px;
  }

  .sequence-canvas li.animate-in {
        opacity:1;
        -webkit-transition: .75s;
        /*-webkit-transition-delay: 1s;*/
  }
  /*.sequence-canvas li.animate-out {*/
        /*opacity:0;*/
        /*-webkit-transition: 1s;*/
        /*-webkit-transition-delay: 1s;*/
  /*}*/

/* div voor website-screenshot  */
.site {
      display:block;
      height:374px;
      overflow:hidden;
      opacity:1;
      -webkit-transition: 1s opacity;
      background:green;
      background-size:contain;
      background-repeat:no-repeat;
      width:960px;
      margin:auto;
      overflow:hidden;
}
    .animate-in .site {
        background:red;
    }
  .sequence-canvas li.animate-in {
    opacity:1;
  }
  .sequence-canvas li.animate-out {
    opacity:0 !important;
  }

  .sequence-canvas li div.image {
    position:relative;
    margin:0 auto;
    width:960px;
    height:100%;
    margin-top:-100px;
    opacity:0;
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    transition: 1s all ease;
  }
    .sequence-canvas li.animate-in div.image {
      opacity:1;
      margin-top:0;
    }
    .sequence-canvas li.animate-out div.image {
      opacity:0;
      margin-top:100px;
    }

/* Animatie van div met title */
.intro1,
.intro2,
.intro3 {
    position:absolute;
    width: 100px;
    height: 100px;
    background: blueviolet;
    right:0px;
    bottom:0px;
    opacity:0;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
    /*-webkit-transition-delay:1s;*/
}
.animate-in .intro1,
.animate-in .intro2,
.animate-in .intro3 {
    right:10px;
    bottom:10px;
    opacity:1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
    /*-webkit-transition-delay:2s;*/
}

.animate-out .intro1,
.animate-out .intro2,
.animate-out .intro3 {
    right:-200px;
    bottom:10px;
}
  .sequence-canvas li .title {
    position:absolute;
    bottom:120px;
    left:500px;
    opacity:0;
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    transition: 1s all ease;
    font-family:"Ubuntu";
    font-size:30px;
    font-weight:300;
    color:#2E3C9B;
    padding:10px;
    background:rgba(220,244,254,0.95);
  }
    .sequence-canvas li .title a {color:inherit;text-decoration:none;}
    .sequence-canvas li .title span {font-size:19px;font-style:italic;}

   .sequence-canvas li.animate-in .title {
    left:0px;
    opacity:1;
   }
   .sequence-canvas li.animate-out .title {
    left:50px;
    opacity:0;
   }
   .sequence-canvas li b {
     background:url(../img/icon-link-hover.png) no-repeat 0 0;
     display:inline-block;
     width:20px;
     height:20px;
     margin-left:10px;
   }
   .sequence-canvas li a:hover,
   .sequence-canvas li a:focus {
     color:#4FC5C9;
   }
   
   .sequence-canvas li a:hover b,
   .sequence-canvas li a:focus b {
     background:url(../img/icon-link.png) no-repeat 0 0;
   }