#hoot-welcome-msg {
	--hoot-accentcol: #fa6c04;
	--hoot-accentfont: #fff;
	--hoot-accentdark: #d15802;
}


#hoot-welcome-msg { padding-left: 0; padding-top: 0; padding-bottom: 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-multiimg { align-items: flex-end; width: 450px; background: #eee; }
.hoot-welcome-multiimg { background: #fff; box-shadow: none; padding-left: 20px; }
.hoot-welcome-multiimg + .hoot-welcome-text { margin: 35px 0 40px; }
.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: 700px; }
.hoot-welcome-text a { color: var(--hoot-accentcol); }
.hoot-welcome-text a:hover { color: var(--hoot-accentdark); }

.hoot-welcome-actions {}
.button.hoot-welcome-btn { margin: 10px; margin-left: 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: 15px; color: var(--hoot-accentdark); font-style: italic; }

@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; }
}

