*{padding:0;margin:0}

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  background: #fff;
}

@media only screen and (max-width: 739px) {

.boxphone {
  position: relative;
  /*background: #fff;*/
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: left;
  z-index: 999;  
}	

.box {display:none;}

.crossfade>figure{animation:imageAnimation 24s linear infinite 0s;backface-visibility:hidden;background-size:cover;color:transparent;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:0;transform-origin: center center;}

.crossfade>figure:nth-child(1){background-image:url(img1_400.PNG)}

.crossfade>figure:nth-child(2){animation-delay:6s;background-image:url(img2_400.PNG)}

.crossfade>figure:nth-child(3){animation-delay:12s;background-image:url(img3_400.PNG)}

.crossfade>figure:nth-child(4){animation-delay:18s;background-image:url(img4_400.PNG)}

}

@media only screen and (min-width: 740px) {
body {
  padding-top: 100px;
}

.box {
  position: relative;
  overflow: auto;
  /*background: #fff;*/
  margin: 0 auto;
  width: 700px;
  /*height: 400px;*/
  text-align: left;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  z-index: 999;
}

.boxphone {display:none;}
/*
.crossfade>figure{animation:imageAnimation 30s linear infinite 0s;backface-visibility:hidden;background-size:cover;background-position:center center;color:transparent;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:0}
*/

.crossfade>figure{animation:imageAnimation 24s linear infinite 0s;backface-visibility:hidden;background-size:cover;color:transparent;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:0}

.crossfade>figure:nth-child(1){background-image:url(img1.PNG)}

.crossfade>figure:nth-child(2){animation-delay:6s;background-image:url(img2.PNG)}

.crossfade>figure:nth-child(3){animation-delay:12s;background-image:url(img3.PNG)}

.crossfade>figure:nth-child(4){animation-delay:18s;background-image:url(img4.PNG)}

}
/*
@keyframes imageAnimation{0%{animation-timing-function:ease-in;opacity:0}8%{animation-timing-function:ease-out;opacity:1}17%{opacity:1}25%{opacity:0}100%{opacity:0}}
*/
  @keyframes imageAnimation {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    25%  { opacity: 1; }
    35%  { opacity: 0; }
    100% { opacity: 0; }
  }