/* Only for desktop*/

#m-friendly-im{display:block}

@media screen and (max-width:887px) { /* Catches Samsung Pocket and Galaxy 3 */

#container, #anim {	display:none;}
#m-friendly-im{display:block !important;border:0px solid magenta;margin:20px auto auto 5%;}
#mfi{display:block !important;}

.bars{overflow-y:scroll}
.flexiblesbild{margin:auto}
}



@media screen and (min-width: 888px ) {

#m-friendly-im{display:none;}

#container{
		display:inline-block;
		position:relative;width:640px;height:400px;
		max-width:660px;
		border:0px dotted red;
		overflow: hidden; padding: 0;  margin: 3px 0 0 0; 
		background-color:transparent;
	}

#anim { /* The size of the original image crop in the background -- not all parts will show */
  display:inline-block;
  position: absolute;
  height: 450px;
  width: calc(680px + 60px);
  left:-35px; /* in respect to the container */
  top:-40px; /* in respect to the container */
  border:0px solid green;
  /*scale(1);*/
  	background-color: transparent;
  	background-image: url('../pix/mobile-first/mobile-first-smartphone-display.jpg');
	animation: zoom-move 0.7s linear 1; /*This added for each page either on page or in common script*/
 /* transformation at various stages described in zoom-move @keyframes below */
}

@keyframes zoom-move { /* transforms image zoom and position at various % stages */
  0% {
    transform: scale(0.8);
    transform-origin: -20% -30%; /* L     T  */
    opacity: 0.25;
  }

  10% {
    opacity: .5; /*fading in*/
  }

   20% {
    opacity: 1; /*faded in*/
  }

  100%{
	transform: scale(1);
	
    /* transform-origin: 80% -10%; L     T  */
  }

}

} /*End greater than 888*/