@charset "utf-8";

@keyframes slideDown {
    0%{
        opacity:0; transform:translateY(-150%);
    }
    20%{
        opacity:1; transform:translateY(0);
    }
    80%{
        opacity:1; transform:translateY(0);
    }
    100%{
        opacity:0; transform:translateY(-150%);
    }
}

@keyframes dialogSlide {
    0%{
        opacity:0; transform:translateY(-30%);
    }
    100%{
        opacity:1; transform:translateY(0);
    }
}

@keyframes opacity1 {
    0%{
        opacity:0; 
    }
    100%{
        opacity:1;
    }
}

@keyframes bounce {
  100% {
    top: -20px;
  }
}

@keyframes slide{
	100% {
		transform: translateX(0);	
	}
}

@keyframes upandDown{
	100% {
		transform: translateY(0);	
	}
}

@keyframes opacity{
	100% {
		 opacity: 0.5;
	}
}

@keyframes dot{
	100% {
		background: #f05e5d;
		transform: scale(1.1);
	}
}

@keyframes blink{
	0% { opacity: 1; }
	20% { opacity: 0; }
	50% { opacity: 1; }
}

@keyframes zoomIn {
	40% { transform: scale(1.02); opacity:0.8; }
	100% { transform: scale(1); opacity:1; }
}


.ani-slide_left { transform: translateX(-100%); }
.ani-slide_bottom { transform: translateY(100%); }
.ani-slide_top { transform: translateY(-100%); }
.ani-opacity05 { opacity:0; }
.ani-zoomin { transform: scale(0.8); opacity:0; }
.ani-blink { animation: blink 2s ease-in-out infinite; }

.popup--open .ani-slide_left,
.popup-open .ani-slide_left{ animation: slide .5s .1s ease both alternate; }
.popup--open .ani-slide_bottom,
.popup-open .ani-slide_bottom { animation: upandDown .5s .1s ease both alternate; }
.popup--open .ani-slide_top,
.popup-open .ani-slide_top { animation: upandDown .5s .1s ease both alternate; }
.popup--open .ani-opacity05,
.popup-open .ani-opacity05 { animation: opacity .5s .1s ease both alternate; }
.popup--open .ani-zoomin,
.popup-open .ani-zoomin { animation: zoomIn .5s .1s ease-out both alternate; }

@keyframes slideUpOp {
    0%{
        opacity:0; transform:translateY(5%);
    }
    100%{
        opacity:1; transform:translateY(0);
    }
}

@keyframes opAndSlideUp {
    0%{
        opacity:0;
    }
    20%{
        opacity:1; transform:translateY(0);
    }
    100%{
        opacity:1; transform:translateY(-30%);
    }
}


@keyframes slideUpOpBig {
    0%{
        opacity:0; transform:translateY(15%);
    }
    100%{
        opacity:1; transform:translateY(0);
    }
}

@keyframes clickMo {
    0%{
        opacity:1; transform: scale(0);
    }
    100%{
        opacity:0; transform:scale(1.6);
    }
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutUp {
	0% {
	  opacity: 1;
	}
	60%{opacity: 0;}
	100% {
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	}
}
@keyframes fadeOutUp {
	0% {
	  opacity: 1;
	}
	60%{opacity: 0;}
	100% {
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	}
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}