.dialog--open .dialog__overlay {
	-webkit-transition-duration: 0.8s;
	transition-duration: 0.8s;
}

.dialog--close .dialog__overlay {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.dialog__content {
	padding: 0;
	background: transparent;
}

.dialog.dialog--open .dialog__content {
	opacity: 1;    position: absolute;
    top: 100px;
}

.morph-shape {
	position: absolute;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	top: -2px;
	left: -2px;
	z-index: -1;
}

.morph-shape svg rect {
	stroke: #fff;
	stroke-width: 2px;
	stroke-dasharray: 1680;
}

.dialog--open .morph-shape svg rect {
	-webkit-animation: anim-dash 0.6s forwards;
	animation: anim-dash 0.6s forwards;
}

.dialog-inner {
	opacity: 0;
	background: #fff;
}

.dialog--open .dialog-inner {
	width:88%; height:40px;
	opacity: 1;
	-webkit-transition: opacity 0.85s 0.35s;
	transition: opacity 0.85s 0.35s;
}

.dialog.dialog--open h2 {
	-webkit-animation: anim-elem-1 0.7s ease-out both;
	animation: anim-elem-1 0.7s ease-out both;
}

.dialog.dialog--open button {
	-webkit-animation: anim-elem-2 0.7s ease-out both;
	animation: anim-elem-2 0.7s ease-out both;
}

@keyframes anim-dash {
	0% {
		stroke-dashoffset: 1680;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@-webkit-keyframes anim-dash {
	0% {
		stroke-dashoffset: 1680;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

/* Inner elements animations */

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

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

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

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