.animation {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.screen {
  position: relative;
  border: solid 2px black;
  margin: 0 auto;
  margin-top: 10px;
  background: white;
  -webkit-animation: devices 10s ease 0s infinite;
  -moz-animation: devices 10s ease 0s infinite;
  -o-animation: devices 10s ease 0s infinite;
  animation: devices 10s ease 0s infinite;
}

@-webkit-keyframes devices {
  0% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
	/*background-repeat: no-repeat;*/
  }

  29% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png')
	/*background-repeat: no-repeat;*/
  }

  33% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  60% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  66% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

   94% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

  100% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
    /*background-repeat: no-repeat;*/
  }
}
moz-webkit-keyframes devices {
  0% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
	/*background-repeat: no-repeat;*/
  }

  29% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png')
	/*background-repeat: no-repeat;*/
  }

  33% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  60% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  66% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

   94% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

  100% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
    /*background-repeat: no-repeat;*/
  }
}
@-o-keyframes devices {
  0% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
	/*background-repeat: no-repeat;*/
  }

  29% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png')
	/*background-repeat: no-repeat;*/
  }

  33% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  60% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  66% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

   94% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

  100% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
    /*background-repeat: no-repeat;*/
  }
}
@keyframes devices {
  0% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png');
	/*background-repeat: no-repeat;*/
  }

  29% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
	background-image: url('/img/desktop.png')
	/*background-repeat: no-repeat;*/
  }

  33% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  60% {
    top: 68px;
    width: 280px;
    height: 210px;
    border-radius: 20px;
    border-width: 16px;
	background-image: url('/img/pad.png')
	/*background-repeat: no-repeat;*/
  }

  66% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 5px;
	background-image: url('/img/mobil.png')
	/*background-repeat: no-repeat;*/
  }

  94% {
    top: 100px;
	width: 100px;
    height: 190px;
    border-width: 6px;
    border-top-width: 7px;
    border-bottom-width: 10px;
    border-radius: 2px;
    background-image: url('/img/mobil.png');
    /*background-repeat: no-repeat;*/
  }

  100% {
    top: 0;
    width: 600px;
    height: 337px;
    border-width: 10px;
    border-radius: 2px;
    border-bottom-width: 15px;
    background-image: url('/img/desktop.png');
    /*background-repeat: no-repeat;*/
  }
}