﻿@keyframes a {
	0% { opacity: 0; transform: scale(1.5) }
	to { opacity: 1; transform: scale(1) }
}

@keyframes b {
	0% { opacity: 1; transform: scale(1) }
	15% { opacity: 1; transform: scale(1.1) }
	to { opacity: 0; transform: scale(.5) }
}

@keyframes c {
	0% { transform: translate(-50%,-50%) rotate(0) }
	50% { transform: translate(-50%,-50%) rotate(-180deg) }
	to { transform: translate(-50%,-50%) rotate(-1turn) }
}

@keyframes d {
	0% { transform: scale(1) }
	10% { transform: scale(1.2) translateX(6px) }
	25% { transform: scale(1.3) translateX(8px) }
	40% { transform: scale(1.2) translateX(6px) }
	50% { transform: scale(1) }
	60% { transform: scale(.8) translateX(6px) }
	75% { transform: scale(.7) translateX(8px) }
	90% { transform: scale(.8) translateX(6px) }
	to { transform: scale(1) }
}

@keyframes e {
	0% { transform: scale(1) }
	10% { transform: scale(1.2) translateX(-6px) }
	25% { transform: scale(1.3) translateX(-8px) }
	40% { transform: scale(1.2) translateX(-6px) }
	50% { transform: scale(1) }
	60% { transform: scale(.8) translateX(-6px) }
	75% { transform: scale(.7) translateX(-8px) }
	90% { transform: scale(.8) translateX(-6px) }
	to { transform: scale(1) }
}

.drift-zoom-pane { background: rgba(0,0,0,.5); transform: translateZ(0); -webkit-transform: translateZ(0) }
	.drift-zoom-pane.drift-opening { animation: a .18s ease-out; -webkit-animation: a .18s ease-out }
	.drift-zoom-pane.drift-closing { animation: b .21s ease-in; -webkit-animation: b .21s ease-in }
	.drift-zoom-pane.drift-inline { border-radius: 75px; box-shadow: 0 6px 18px rgba(0,0,0,.3); height: 150px; position: absolute; width: 150px }
.drift-loading .drift-zoom-pane-loader { animation: c 1.8s linear infinite; -webkit-animation: c 1.8s linear infinite; display: block; height: 20px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 66px }
.drift-zoom-pane-loader:after, .drift-zoom-pane-loader:before { background: hsla(0,0%,100%,.9); border-radius: 20px; content: ""; display: block; height: 20px; margin-top: -10px; position: absolute; top: 50%; width: 20px }
.drift-zoom-pane-loader:before { animation: d 1.8s linear infinite; -webkit-animation: d 1.8s linear infinite; left: 0 }
.drift-zoom-pane-loader:after { animation: e 1.8s linear infinite; -webkit-animation: e 1.8s linear infinite; animation-delay: -.9s; -webkit-animation-delay: -.9s; right: 0 }
.drift-bounding-box { background-color: rgba(0,0,0,.4) }
