#hoot-welcome-msg {
	--hoot-accentcol: #df9d00;
	--hoot-accentfont: #fff;
	--hoot-accentdark: #52771f;
}


#hoot-welcome-msg { padding-left: 0; margin: 5px 0 25px; border-left-color: var(--hoot-accentcol); }
.hoot-welcome-msg {}
.hoot-welcome-content { display: flex; align-items: center; }

.hoot-welcome-img {
	display: block;
	display: flex; align-items: flex-start; /* center */
	background: #eee;
	width: 275px; min-height: 145px; align-self: stretch;
	flex-shrink: 0;
	overflow: hidden !important;
	box-shadow: 0 0 6px 1px rgba(200,200,200,0.5);
	position: relative;
	/* max-height: 350px !important; */
}
.hoot-welcome-img--large { width: 350px; }
.hoot-welcome-img--ss { align-items: center; background: #f7f7f7; padding: 15px; box-sizing: border-box; max-height: none !important; }
.hoot-welcome-img--ss img { border: solid 1px #ccc; box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, 0.3); }
.hoot-welcome-screenshot { width: 100%; }
.hoot-welcome-scrollableimg { position: absolute; top: 0; left: 0; }
.hoot-welcome-scrollImg {
	position: absolute; top: 0; left: 0;
	animation: scrollImg 18s ease-in-out infinite;
	/* animation-delay: 1s; */
	animation-play-state: running;
}
.hoot-welcome-screenshot:hover { animation-play-state: paused; }
@keyframes scrollImg {
	0%  { transform: translateY(0); }
	10%  { transform: translateY(0); }
	90% { transform: translateY(calc(-100% + var(--hoot-scimg-boxh, 250px))); }
	95% { transform: translateY(calc(-100% + var(--hoot-scimg-boxh, 250px))); }
	98% { transform: translateY(0); }
}

.hoot-welcome-text {
	flex-grow: 1;
	padding-left: 45px;
	margin: 25px 0 30px;
	font-size: 16px; line-height: 1.5em;
}
.hoot-welcome-text h1 { font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -0.5px; }
.hoot-welcome-text h1 span { color: var(--hoot-accentcol); }
.hoot-welcome-text p { font-size: inherit; line-height: inherit; max-width: 850px; }
.hoot-welcome-text a { color: var(--hoot-accentcol); }
.hoot-welcome-text a:hover { color: var(--hoot-accentdark); }

.hoot-welcome-actions { display: flex; max-width: 850px; gap: 10px; }
.hoot-welcome-multiactions { padding-top: 15px; margin: .5em 0; }
.hoot-welcome-multiactions > div { flex-grow: 1; background: #f1f1f1; border: solid 1px #ddd; text-align: center; width: 100%; }
.hoot-welcome-multiactions > div { width: 50%; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.hoot-welcome-multiactions > div > div { padding: 10px 8px; }
.hoot-welcome-actions p { padding: 0; margin: 0; }
.hoot-welcome-actions p + p { margin-top: 5px; }
.hoot-welcome-actions em { font-size: 0.875em; line-height: 1.3em; }

.button.hoot-welcome-btn { margin: 10px 0; font-weight: 500; font-size: 15px; line-height: 1.7em; padding: 10px 30px; }
.button.hoot-btn-processplugin.updating-message:before { color: #a7a7a7; }
.button.hoot-welcome-btn + div.error { margin: 0; }

.hoot-welcome-btn.button { border-color: var(--hoot-accentcol); }
.hoot-welcome-btn.button:hover,
.hoot-welcome-btn.button:active,
.hoot-welcome-btn.button:focus { border-color: var(--hoot-accentdark); }
.hoot-welcome-btn.button-primary       { background: var(--hoot-accentcol);  color: var(--hoot-accentfont); }
.hoot-welcome-btn.button-primary:hover { background: var(--hoot-accentdark); color: var(--hoot-accentfont); }
.hoot-welcome-btn.button-primary:active,
.hoot-welcome-btn.button-primary:focus { background: var(--hoot-accentdark); color: var(--hoot-accentfont); box-shadow: 0 0 0 1px var(--hoot-accentcol); }
.hoot-welcome-btn.button-secondary       { color: var(--hoot-accentcol);  }
.hoot-welcome-btn.button-secondary:hover { color: var(--hoot-accentdark); }
.hoot-welcome-btn.button-secondary:active,
.hoot-welcome-btn.button-secondary:focus { color: var(--hoot-accentdark); box-shadow: 0 0 0 1px var(--hoot-accentcol); }

.hoot-welcome-text .hoot-welcome-note { font-size: 14px; color: var(--hoot-accentdark); font-style: italic; background: #fafafa; border-top: solid 1px #ddd; padding: 3px; }
.hoot-welcome-text > .hoot-welcome-note { border-top: none; }

@media only screen and (max-width: 1078px) {
	.hoot-welcome-actions { flex-direction: column; }
	.hoot-welcome-multiactions > div { width: 100%; }
}

@media only screen and (max-width: 728px) {
	.hoot-welcome-content { flex-direction: column; }
	.hoot-welcome-img { max-width: 100%; height: 100px; align-items: flex-start; margin: 15px auto; }
}

