/*
 ____                 _     
| __ ) _ __ _____   _(_)___ 
|  _ \| '__/ _ \ \ / / / __|
| |_) | | |  __/\ V /| \__ \
|____/|_|  \___| \_/ |_|___/
                
CSS File - These are the styles for various site pop-up (eg. log-in, sign-up).
*/

/* Animations of pop-up */
.dialog__overlay {
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
	-webkit-animation-name: anim-open;
	animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
	-webkit-animation-name: anim-close;
	animation-name: anim-close;
}

.dialog.dialog--open h2,
.logo_login,
.dialog.dialog--open button,
.dialog.dialog--open a,
.dialog.dialog--open input,
.dialog.dialog--open p,
.dialog.dialog--open textarea {
	-webkit-animation: anim-elem 0.3s both;
	animation: anim-elem 0.3s both;
}

.dialog.dialog--open h2, .logo_login {
	-webkit-animation-delay: 0.05s;
	animation-delay: 0.05s;
}

.dialog.dialog--open button, .dialog.dialog--open a, .dialog.dialog--open p, .dialog.dialog--open input, .dialog.dialog--open textarea  {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@-webkit-keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); }
}

@keyframes anim-close {
	0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
}

/* Inner elements animations */
@-webkit-keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes anim-elem {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}