.container1dn {
	/*
  width: 440px;
  height: 215px;

overflow: hidden;*/

}

.card-front1dn, .card-back1dn {
 /*  position: absolute;
 
  width: 440px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
		  

  
}

/* card global */
.card-front1dn {
  z-index: 1;

 
}
/* front card content/text */
.card-front1dn .content1dn{

  position: absolute;
 
}



/* card back global */
.card-back1dn {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back1dn .content1dn {
  position: relative;

  
}


/* inverte animation */
.container1dn.selected .card-back1dn {
  transform: rotateY(0deg);
  z-index: 1;

  
}
.container1dn.selected .card-front1dn {
  transform: rotateY(180deg);
  z-index: 0;

}


.container1dn {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container1dn.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}

/*************



.container1dn :before {
 position: absolute;
 top: 0;
 left: -120%;
 z-index: 2;
 display: block;
 content: '';
 width: 300px;
 height: 250px;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.container1dn :hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes container1dn {
 100% {
  left: 125%;
 }
}
@keyframes shine {
 100% {
  left: 125%;
 }
}


----------

img {
    -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

img:hover {
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
}
/* */


.container2dn {
 /*
  width: 480px;
  height: 215px;
*/

}

.card-front2dn, .card-back2dn {
 /*
  position: absolute;

  width: 480px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  
}

/* card global */
.card-front2dn {
  z-index: 1;

 
}
/* front card content/text */
.card-front2dn .content2dn{

  position: absolute;
 
}



/* card back global */
.card-back2dn {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back2dn .content2dn {
  position: relative;

  
}


/* inverte animation */
.container2dn.selected .card-back2dn {
  transform: rotateY(0deg);
  z-index: 1;
  
}
.container2dn.selected .card-front2dn {
  transform: rotateY(180deg);
  z-index: 0;
   
}



.container2dn {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container2dn.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}


/* */


.container5dn {
 /*
  width: 480px;
  height: 215px;
*/

}

.card-front5dn, .card-back5dn {
 /*
  position: absolute;

  width: 480px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  
}

/* card global */
.card-front5dn {
  z-index: 1;

 
}
/* front card content/text */
.card-front5dn .content5dn{

  position: absolute;
 
}



/* card back global */
.card-back5dn {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back5dn .content5dn {
  position: relative;

  
}


/* inverte animation */
.container5dn.selected .card-back5dn {
  transform: rotateY(0deg);
  z-index: 1;
  
}
.container5dn.selected .card-front5dn {
  transform: rotateY(180deg);
  z-index: 0;
   
}


.container5dn {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container5dn.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}

/* */


.container10dn {
 /*
  width: 480px;
  height: 215px;
*/

}

.card-front10dn, .card-back10dn {
 /*
  position: absolute;

  width: 480px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  
}

/* card global */
.card-front10dn {
  z-index: 1;

 
}
/* front card content/text */
.card-front10dn .content10dn{

  position: absolute;
 
}



/* card back global */
.card-back10dn {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back10dn .content10dn {
  position: relative;

  
}


/* inverte animation */
.container10dn.selected .card-back10dn {
  transform: rotateY(0deg);
  z-index: 1;
  
}
.container10dn.selected .card-front10dn {
  transform: rotateY(180deg);
  z-index: 0;
   
}


.container10dn {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container10dn.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}

/* */


.container1dr {
 /*
  width: 480px;
  height: 215px;
*/

}

.card-front1dr, .card-back1dr {
 /*
  position: absolute;

  width: 480px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  
}

/* card global */
.card-front1dr {
  z-index: 1;

 
}
/* front card content/text */
.card-front1dr .content1dr{

  position: absolute;
 
}



/* card back global */
.card-back1dr {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back1dr .content1dr {
  position: relative;

  
}


/* inverte animation */
.container1dr.selected .card-back1dr {
  transform: rotateY(0deg);
  z-index: 1;
  
}
.container1dr.selected .card-front1dr {
  transform: rotateY(180deg);
  z-index: 0;
   
}


.container1dr {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container1dr.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}

/* */

.container5dr {
 /*
  width: 480px;
  height: 215px;
*/

}

.card-front5dr, .card-back5dr {
 /*
  position: absolute;

  width: 480px;
  height: 215px;
*/
  
  border-radius: 10px;
  color: white;
  
  transition: 0.9s ease;
  text-align: center;
   -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  
}

/* card global */
.card-front5dr {
  z-index: 1;

 
}
/* front card content/text */
.card-front5dr .content5dr{

  position: absolute;
 
}



/* card back global */
.card-back5dr {
  z-index: 0;
  /*  invert card content  */
  transform: rotateY(-180deg);
  
}
.card-back5dr .content5dr {
  position: relative;

  
}


/* inverte animation */
.container5dr.selected .card-back5dr {
  transform: rotateY(0deg);
  z-index: 1;
  
}
.container5dr.selected .card-front5dr {
  transform: rotateY(180deg);
  z-index: 0;
   
}


.container5dr {
		  
    -webkit-mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    mask-image: linear-gradient(60deg,#000 25%,rgba(0,0,0,.3) 50%,#000 75%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.container5dr.selected {
	
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
		
}

/* */