@CHARSET "UTF-8";

/* Maak hier de stylesheet voor de gloed van de liefde afbeelding, webkit is nodig voor de animaties*/
#GvLAd{
	visibility	: hidden;
	position	: absolute;
	z-index		: 1000;
	top			: 10px;
	left		: 10px;

		  /* Specify the CSS properties that we'd like to animate/transition */
  -webkit-transition-property: -webkit-transform, top, left;
  
  /* Specify how long the duration should be for the animation/transition of each of the properties.
     In this case, it make sense to specify a 1s duration for -webkit-transform, top, and right to create 
     a smooth transition. This could also be written shorthand, '-webkit-transition-duration: 1s;'. */
  -webkit-transition-duration: 1s, 1s, 1s;
}

#coverImage{
	width				: 100px;
	-webkit-transform	: rotate(0deg) scale(0.1);

	  /* Specify the CSS properties that we'd like to animate/transition */
  -webkit-transition-property: -webkit-transform, top, right;
  
  /* Specify how long the duration should be for the animation/transition of each of the properties.
     In this case, it make sense to specify a 1s duration for -webkit-transform, top, and right to create 
     a smooth transition. This could also be written shorthand, '-webkit-transition-duration: 1s;'. */
  -webkit-transition-duration: 1s, 1s, 1s;
}


.card 
{

	
	/* Ensure that the card lives correctly in 3D space */
	-webkit-transform-style: preserve-3d;
	
	/* We apply this property to the card so it can smoothly flip between its sides */
	-webkit-transition-property: -webkit-transform;
	/* Make the animation occur over a period of 1.5 seconds */
	-webkit-transition-duration: 1.5s;
}

/* Applies the flip animation to the card */
.card.flipped
{

	/* Rotate the card 180 degrees along the y-axis. This animation allows the card to
	  toggle between its regular and flipped states. */
	-webkit-transform: rotateY(180deg);
}

/* Styles the card and hides its "back side" when the card is flipped */
.face 
{
	position: absolute;
	height: 346;
	width: 250px;
	/* Give a round layout to the card */
	-webkit-border-radius: 10px;
	/* Drop shadow around the card */
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
	/* Make sure that users will not be able to select anything on the card */
	
	/* We create the card by stacking two div elements at the exact same location. The back of the card 
	   is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden
	   ensures that the "back side" is hidden when the card is flipped
	*/
	-webkit-backface-visibility: hidden;
}

/* Styles the front of the card */
.front 
{
	position: absolute;
	height: 346px;
	width: 250px;
	
	
	/* Background color of this side of the card */
	background-image: url('Gloed van de Liefde cover.png') no-repeat;
}


/* Styles the back of the card */
.back 
{
	position: absolute;
	height: 346px;
	width: 250px;
	
	
	color: rgb(34,65,108);
	background-color: rgba(78,150,249,0.7);
	
	/* Ensure the "back side" is flipped already */
	-webkit-transform: rotateY(180deg);
}