html { 
    
  background: #000000 url(animation-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#animation-div {
    width:600px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    margin-top:20px;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.5);
}

#page {
    width:800px;
    height:200px;
    background-color:red;
}


#animation {
    padding-left:20px;
    width:1020px;
    padding-right:20px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.5);
    overflow:auto;
}

#dw {
    margin-left:auto;margin-right:auto;margin-top:10px;
    background-image: url(dylan-4.png);
    background-size:400px 50px;
    width:400px;
    height:50px;
    display:block;
}


#lego {
    width:1020px;
    height:180px;
    background-image:url(lego.jpg);
    background-size:1020px 180px;float:left;
    display:block;
    margin-bottom:20px;
  overflow:hidden;
}

#lego-2 {
    width:500px;
    height:200px;
    background-image:url(lego-2.jpg);
    background-size:500px 200px;float:right;
    display:block;
    margin-bottom:20px;
  overflow:hidden;
}

#caw {
    width:500px;
    height:200px;
    background-image:url(caw.jpg);
    background-size:500px 200px;float:left;
    display:block;
    margin-bottom:20px;
  overflow:hidden;
}

#micro {
    width:500px;
    height:200px;
    background-image:url(micro.jpg);
    background-size:500px 200px;float:left;
    display:block;
    margin-bottom:20px;
  overflow:hidden;
}

#goodbye {
    width:500px;
    height:200px;
    background-image:url(goodbye.jpg);
    background-size:500px 200px;float:left;
    display:block;
    margin-bottom:20px;
  overflow:hidden;
}

#lipstick {
    width:500px;
    height:200px;
    background-image:url(lipstick.jpg);
    background-size:500px 200px;float:left;
    display:block;
    margin-bottom:20px;;
    float:right;
  overflow:hidden;
}


#branklin {
    width:500px;
    height:200px;
    background-image:url(branklin.jpg);
    background-size:500px;
    float:right;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#bimpson {
    width:500px;
    height:200px;
    background-image:url(bimpson.jpg);
    background-size:500px;
    float:left;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#pirates {
    width:500px;
    height:200px;
    background-image:url(pirates.jpg);
    background-size:500px;
    float:right;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#technic {
    width:500px;
    height:200px;
    background-image:url(technic.jpg);
    background-size:500px;
    float:left;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#pokeballin {
    width:500px;
    height:200px;
    background-image:url(pokeballin.jpg);
    background-size:500px;
    float:right;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#legohouse {
    width:500px;
    height:200px;
    background-image:url(lego-house.jpg);
    background-size:500px;
    float:left;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}

#houdini {
    width:500px;
    height:200px;
    background-image:url(houdini.jpg);
    background-size:500px;
    float:right;
    margin-bottom:20px;
    display:block;
  overflow:hidden;
}


.hoverer {
    width:500px;
    height:300px;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.65);
    
    position:relative;
    top:-24px;
    opacity:0;
}

.hoverer:hover {
    opacity:1;
}

.hoverer:active {
    opacity:0.8;
}


.legohoverer {
    width:1020px;
    height:300px;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.65);
    
    position:relative;
    top:-24px;
    opacity:0;
}

.legohoverer:hover {
    opacity:1;
}

.legohoverer:active {
    opacity:0.8;
}


h1 { font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-size: 36px; font-style: normal; font-variant: normal; font-weight: bold; line-height: 38px;color:white; margin-left:auto;margin-right:auto;}
h2 { font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: bold;color:white;line-height:30px; }
h3 { font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-size: 22px; font-style: normal; font-variant: normal; font-weight: bold; line-height: 24px;color:white;}
h3#lego-title{position:relative;top:60px;}
.animation-title{position:relative;top:80px;}
p {font-family:sans-serif;color:white;font-size:16px;margin-left:0px;line-height:22px;}
.animation-desc {font-family:sans-serif;color:white;font-size:16px;margin-left:0px;line-height:22px;position:relative;top:60px;font-weight:bold;}
p#lego-p{position:relative;top:50px;}
p.plinks{position:relative;top:10px;font-weight:bold;}
a {font-family:sans-serif;color:white;opacity:0.8;}

    a:hover {opacity:1;}
.animationboxes {opacity:1;}
.links {text-decoration:none;opacity:0.8;}
    a.links:hover {opacity:1;}
    
    div.button {width:234px;height:130px;margin-right:7px;background-size: 234px 130px;opacity:0.8;float:left;margin-top:7px;}
    .button:hover{opacity:1;}
    #t1 {background-image:url(technic/t1.jpg);}
    #t2 {background-image:url(technic/t2.jpg);}
    #t3 {background-image:url(technic/t3.jpg);}
    #t4 {background-image:url(technic/t4.jpg);}
    #t5 {background-image:url(technic/t5.jpg);}
    #t6 {background-image:url(technic/t6.jpg);}
    #t7 {background-image:url(technic/t7.jpg);}
    #t8 {background-image:url(technic/t8.jpg);}
    
     div.button2 {width:155px;height:87px;margin-right:6px;background-size: 155px 87px;opacity:0.8;float:left;margin-top:6px;}
    .button2:hover{opacity:1;}
    
    #p1 {background-image:url(pirates/p1.jpg);}
    #p2 {background-image:url(pirates/p2.jpg);}
    #p3 {background-image:url(pirates/p3.jpg);}
    #p4 {background-image:url(pirates/p4.jpg);}
    #p5 {background-image:url(pirates/p5.jpg);}
    #p6 {background-image:url(pirates/p6.jpg);}