.typing-cursor
{
    animation: blink 0.7s infinite;
}
  
@keyframes blink
{
    0%
    {
      opacity: 0;
    }
    50%
    {
      opacity: 1;
    }
    100%
    {
      opacity: 0;
    }
}
.roll-left
{
  animation: rollLeft 1s forwards ease-in-out;
  position: relative;
}
@keyframes rollLeft
{
  
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  to {
    clip-path: polygon(0 0, 120% 0, 120% 100%, 0% 100%);
  }
}

.lightRollLeft:after
{
  animation: lightrollLeft 1s ease-in-out forwards;
  right: 0;
}
@keyframes lightrollLeft
{
  from
  {
    right: 0;
    width: 0;
  }
  to 
  {
    right: 100%;
    width: 100% !important; 
  }
}



.roll-right
{
  animation: rollright 1s forwards ease-in-out;
  position: relative;
}
@keyframes rollright
{
  
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }

  to {
    clip-path: polygon(-20% 0, 100% 0, 100% 100%, -20% 100%);
  }
}
.lightRollLeft:after, .lightRollRight:after
{
  content: "";
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 100%;
  box-shadow: 0px 0px 30px 10px rgba(255, 255, 255,0.75);
  background-color: rgba(255, 255, 255, 0.7);
}

.lightRollRight:after
{
  animation: lightRollRight 1s ease-in-out forwards !important;
  left: 100%;
}
@keyframes lightRollRight
{
  from
  {
    left: 0;
    width: 0;
  }
  to 
  {
    left: 100% !important;
    width: 100% !important; 
  }

}
/* .leftXROll
{
  animation: leftxroll 0.5s forwards ease-in-out;
  clip-path: polygon(100% 0, 100% 0, 0 0, 0 0);
  position: relative;
}
@keyframes leftxroll {
  from
  {
    clip-path: polygon(100% 0, 100% 0, 0 0, 0 0);

  }
  to
  {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);

  }
}
.delay-1s
{
  animation-delay: 0.3s;
}
.leftXROll::before
{
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: lightdown 0.5 ease-in-out forwards;
}
@keyframes lightdown
{
  from
  {

  }  
} */
.leftMove
{
  animation: leftMove 1s forwards ease-in-out;
}
@keyframes leftMove {
  from
  {
    object-position: 0px 0px
  }
  to
  {
    object-position: -850px 0px
  }
}
.rightMove
{
  animation: rightMove 1s forwards ease-in-out;
}
@keyframes rightMove {
  from
  {
    object-position: 0px 0px;
  }
  to
  {
    object-position: 760px 0;
  }
}