

.announcement{
  position:fixed;
  z-index: 8888;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 15vmin;
}

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

.anm_slider{
  width:90vmin;
}

.anm_slide{
  width:100%;
  display:none;
  -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

.anm_slider_controller{
  display:flex;
  align-items: center;
  margin-top: 5vmin;
}

.anm_slider_btn{
  height:2vmin;
  width:5vmin;
  background: rgba(255,255,255,0.5);
  margin:0 1vmin;
  border-radius: 1vmin;
}

.anm_slider_active{
  background: var(--color1);
}

.anm_close{
  width:8vmin;
  margin:10vmin 0;
  z-index: 1;
}


.anm_checkbox{
  display:flex;
  align-items: center;
}

.anm_checkbox span{
  color:white;
  font-size: 4vmin;
}

.anm_checkbox input{
  height:4vmin;
  width:4vmin;
  margin-right: 1vmin;
}


/**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


@media screen and (orientation:landscape) {

  .anm_close{
    position:absolute;
    top:2vmin;
    right:2vmin;
    margin:0;
  }

  .anm_checkbox{
    position:absolute;
    bottom:2vmin;
    right:2vmin;
  }
 }
