/* Video Play Button — mdcode */

.mdcode-play-button-wrap {
	display: block;
}

.mdcode-play-bg-wrap {
	display: flex;
}

.mdcode-play-bg {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	max-width: 100%;
}

.mdcode-video-link {
	display: inline-block;
	transition: transform 0.5s;
	text-decoration: none;
}

.mdcode-video-link:hover {
	transform: scale(1.1);
}

.mdcode-video-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
	line-height: 1em;
	cursor: pointer;
}

.mdcode-video-btn svg {
	height: 1em;
	width: 1em;
}

.mdcode-video-btn i {
	vertical-align: middle;
	transition: color 0.3s;
}

/* Ripple */
.mdcode-video-btn.mdcode-ripple::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: -2px;
	left: -2px;
	bottom: -2px;
	right: -2px;
	border-radius: inherit;
	border: 1px solid currentColor;
	animation: mdcode-btn-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
}

@keyframes mdcode-btn-ripple {
	0%   { border-width: 4px; transform: scale(1); }
	80%  { border-width: 1px; transform: scale(1.35); }
	100% { opacity: 0; }
}

/* Attention grabber animations */
.mdcode-ag-waggle {
	animation: mdcode-ag-waggle 5s infinite;
}
@keyframes mdcode-ag-waggle {
	0%                { transform: none; }
	10%               { transform: rotateZ(-20deg) scale(1.2); }
	13%               { transform: rotateZ(25deg) scale(1.2); }
	15%               { transform: rotateZ(-15deg) scale(1.2); }
	17%               { transform: rotateZ(15deg) scale(1.2); }
	20%               { transform: rotateZ(-12deg) scale(1.2); }
	22%               { transform: rotateZ(0) scale(1.2); }
	25%, 100%         { transform: rotateZ(0) scale(1); }
}

.mdcode-ag-fade {
	animation: mdcode-ag-fade 5s infinite;
}
@keyframes mdcode-ag-fade {
	5%        { opacity: .25; }
	10%       { opacity: 1; }
	15%       { opacity: .25; }
	20%, 100% { opacity: 1; }
}

.mdcode-ag-blink {
	animation: mdcode-ag-blink 1.33s ease-out infinite;
}
@keyframes mdcode-ag-blink {
	0%   { opacity: 1; }
	20%  { opacity: .5; }
	100% { opacity: 1; }
}

.mdcode-ag-grow {
	animation: mdcode-ag-grow 0.4s ease infinite alternate;
}
@keyframes mdcode-ag-grow {
	0%   { transform: scale(1);   border-radius: 50%; }
	100% { transform: scale(1.1); border-radius: 50%; }
}

.mdcode-ag-bounce {
	animation: mdcode-ag-bounce 5s infinite cubic-bezier(.84, -.54, .31, 1.19);
}
@keyframes mdcode-ag-bounce {
	0%        { transform: none; }
	10%       { transform: translateY(-1em); }
	20%, 100% { transform: none; }
}

.mdcode-ag-spin {
	animation: mdcode-ag-spin 5s infinite cubic-bezier(.56, -.35, .22, 1.5);
}
@keyframes mdcode-ag-spin {
	10%       { transform: rotateZ(-20deg); animation-timing-function: ease; }
	20%, 100% { transform: rotateZ(360deg); }
}

.mdcode-ag-shine {
	position: relative;
	overflow: hidden;
	border-radius: 80px;
}
.mdcode-ag-shine::after {
	animation: mdcode-ag-shine 5s infinite;
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(to bottom, transparent, var(--mdpb-shine-color, rgba(193,193,193,0.47)) 50%, transparent);
	transform: rotateZ(60deg) translate(0, 5em);
}
@keyframes mdcode-ag-shine {
	20%, 100% { transform: rotateZ(60deg) translate(0, -80px); }
}

/* Close icon overrides (for Lity) */
.lity-close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	transition: background-color 0.2s, color 0.2s;
}
.lity-close * {
	transition: all 200ms;
}