/*html, body{
  height: 100%;
  width: 100%;
}

body{
  align-items: center;
  background: #000;
  display: flex;
  justify-content: center;
}*/

#photo1{
  animation: blur 5s infinite alternate;
  height: 90vw;
  max-height: 640px;
  max-width: 640px;
  position: relative;
  width: 90vw;
}

#photo1 div{
/*  height: 100%;
  position: absolute;
  width: 100%;*/
    height: 80%;
  position: absolute;
  width: 80%;
}

#normal1{
  background-image:url(../images/virtualevent-mobile.jpg);
 /* background-size: cover;*/
  background-size: 100%;
}

#invert1{
  animation: mask 5s steps(69) infinite alternate;
  background-image:url(../images/virtualevent-mobile.jpg);
  /*background-size: cover;*/
  background-size:100%;
  filter: invert(1.0) grayscale(1.0);
  -webkit-mask: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/sheet.png');
  -webkit-mask-size: 7000% 100%;
  mask: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/sheet.png');
  mask-size: : 7000% 100%;
}

@keyframes blur{
  from{
    filter: blur(1px);
    opacity: 1;
  }
  to{
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes mask{
  from{
	  -webkit-mask-position: 0% 0;
	  mask-position: 0% 0;
  }
  to{
	  -webkit-mask-position: 100% 0;
	  mask-position: 100% 0;
  }
}
/*
a{
  color: white;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  top: 2em;
}*/

@media only screen and (max-width: 767px) and (min-width: 320px) 
{

#photo1 div{
  height: 100%;
  position: absolute;
  width: 100%;

}

#normal1{
  background-image:url(../images/virtualevent-mobile.jpg);
background-size: cover;
}

#invert1{
  animation: mask 5s steps(69) infinite alternate;
  background-image:url(../images/virtualevent-mobile.jpg);
  background-size: cover;

}
}