

body { 

	background: #000000 url('../imagenes/fondo.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align:center; 
	font-family:Arial, Helvetica, sans-serif;
	overflow: hidden;

}
    /*****   LOGO   *****/
#logo{
		z-index: -2;
}
#logo img{
		z-index: -2;
		width: 80%;	
		-webkit-transition: opacity 1s ; /* Safari */
    	transition: opacity 1s ;
}
   /*****   DIRK   *****/
#dirk {
		z-index: 2;	
}

#dirk img{
		position: absolute;
		top: 2%;
		left: 2%;
		max-width: 10%;
		width: 100%;
		/*filter: drop-shadow(20px 20px 50px red);*/
		-webkit-transition: max-width 0.5s, top 0.5s, left 0.5s; /* Safari */
    	transition: max-width 0.5s, top 0.5s, left 0.5s;

} 

#dirk img:hover {
	top:10%;
	left: 10%;
	max-width: 80%;
}

    /*****   DAPHNE   *****/
#daphne {
			z-index: 2;
}

#daphne img{
		position: absolute;
		top: 2%;
		right: 2%;
		max-width: 10%;
		width: 100%;
		-webkit-transition: max-width 0.5s, top 0.5s, right 0.5s; /* Safari */
    	transition: max-width 0.5s, top 0.5s, right 0.5s;
    	-webkit-animation: daphnemove 10s infinite;
    	animation: daphnemove 10s infinite;
} 
#daphne  img:hover {
	top:10%;
	right: 10%;
	max-width: 80%;
}

@-webkit-keyframes daphnemove {
     0%  {top: 2%; right:2%;}
     25% {top: 3%; right:3%;}
     50% {top: 4%; right:2%;}
     75% {top: 3%; right:1%;}
     100% {top: 2%; right:2%;}
}	

@keyframes daphnemove {
     0%  {top: 2%; right:2%;}
     25% {top: 3%; right:3%;}
     50% {top: 4%; right:2%;}
     75% {top: 3%; right:1%;}
     100% {top: 2%; right:2%;}
}	


    /*****   VIDEO   *****/

#video1{
	z-index: -1;
	top: 45%;
	left: 45%;
	width:10%;
	margin: auto;
	border: 5px;
	border-style: solid ;
	box-shadow: 0px 0px 80px #f00;

}
#video1{
        /* background color */
          /*background-color: #ffcccc;*/
          /* background gradient */
          background: linear-gradient(top, #fff, #fcc);
          background: -moz-linear-gradient(top, #fff, #fcc);
          background: -webkit-linear-gradient(top, #fff, #fcc);
          background: -o-linear-gradient(top, #fff, #fcc);
          background: -ms-linear-gradient(top, #fff, #fcc);

	position: absolute;
	width: 15%;
	-webkit-transition: width 1s, top 1s, left 1s;
	transition: width 1s, top 1s, left 1s;
}		
#video1:hover{
		z-index: 1;
		width: 68%;
		left: 16%;
		top: 1%;

}		


