/* operazioni di trasformazione e animazione immagini e video */

/* .=class        #=id*/



@keyframes FadeInOut {
  0% {opacity:1;}
  25% {opacity:.75;}
  50% {opacity:.5;}
  100% {opacity:0;}
}

#fading img {
/*position:absolute;*/
/*left:0;*/
border-radius: 8px;
  width: 450px;
  text-align: center;
  display: inline-block;
}

#fading img.top {
-webkit-animation-name: FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;

/* IE */
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;



}


/* cambio immagini nella pagina principale usando classe "well" "*/

#chpics {
  position:relative;
  /*height:281px;*/
  /*width:430px;*/
  /*margin:0 auto;*/
  
  /*border-radius: 8px;*/
  /*width: 450px;*/
  /*text-align: center;*/
 /* display: inline-block;*/
  /*display: block;*/
  
}

#chpics img {
  position:absolute;
  left:0;
  border-radius: 8px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#chpics img.transparent {
opacity:0;
}

@keyframes SLFchpics {
    0% { opacity:1; }
    45% { opacity:1; }
    55% { opacity:0; }
    100% { opacity:0; }
    }

#chpics img.topimg {
    
-webkit-animation-name: SLFchpics;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;   
    
    
    
animation-name: SLFchpics;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}











/* Make the container relative */
.swap-on-hover {
  position: relative;	
	margin:  0 auto;
	max-width: 400px;
}

/* Select the image and make it absolute to the container */
.swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;
	/* Sets the width and height for the images*/
	width: 400px;
	height: 400px;
}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  transition: opacity .5s linear;
  cursor: pointer;
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}