/*--------------------------------*/

#separator{
  background-color: black;
  width:100vw;
  height:100vh;
  position:fixed;
  z-index:50;

  /*display:none; */
}
.seplogo{
  display: block;
  transform: rotateZ(0deg);
  animation: rotateSep 3s infinite;
  width:100px;
}
.sepPhrase{
  margin-top:2rem;
  font-family: var(--font-family);
  font-size:1.2rem;
  color:white;
}
.sepInitial{
  left:0px;
  top:0px;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.sepEnter{
  left:0px;
  top:0px;
  /*animation-name: leftCenter;*/
  animation-duration: 0.3s;

  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.sepOut{
  left:0px;
  top:100%;
  /*animation-name: centerDown; */
  animation-duration: 0.3s;

  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*--------------------------------ENTER ANIMATIONS*/
@keyframes leftCenter {
  from{
    left:100%;top:0px;
  }
  65%{
    left:0px;top:0px;
  }
  to{
    left:0px;top:0px;
  }
}
@keyframes rightCenter {
  from{
    left:-100%;top:0px;
  }
  65%{
    left:0px;top:0px;
  }
  to{
    left:0px;top:0px;
  }
}
@keyframes upCenter {
  from{
    left:0px;top:-100%;
  }
  65%{
    left:0px;top:0px;
  }
  to{
    left:0px;top:0px;
  }
}
@keyframes downCenter {
  from{
    left:100%;top:0px;
  }
  65%{
    left:0px;top:0px;
  }
  to{
    left:0px;top:0px;
  }
}
/*--------------------------------OUT ANIMATIONS*/

@keyframes centerDown {
  from{
    left:0px; top:0px;
  }
  99%{
    left:0px;top:100%;
  }
  100%{
    display:none;
  }
}

@keyframes centerUp {
  from{
    left:0px; top:0px;
  }
  99%{
    left:0px;top:-100%;
  }
  100%{
    display:none;
  }
}
@keyframes centerRight {
  from{
    left:0px; top:0px;
  }
  99%{
    left:100%;top:0px;
  }
  100%{
    display:none;
  }
}
@keyframes centerLeft {
  from{
    left:0px; top:0px;
  }
  99%{
    left:0px;top:100%;
  }
  100%{
    display:none;
  }
}

/*--------------------------------ROTATION OF THE LOGO*/
@keyframes rotateSep {
  from{
    transform: rotateZ(0deg);
  }

  100%{
    transform: rotateZ(360deg);
  }
}